Improving User Experience and Website Performance with Progressive JPEGs

Delete's Senior Designer, Adam Campion, and Head of Performance, Gregg Turner, look at a number of ways in which you can optimise your website, keeping it running smoothly, without losing out on style.

Ever visited a great looking site only to be let down by slow loading screens? It’s the crux that can contribute to a big loss in a site’s search engine rankings. And, it’s also the reason that every digital designer should consider much more than aesthetics when selecting their imagery. In fact, file size is key. In this article, we’ll look at a number of ways in which you can optimise your website, keeping it running smoothly, without losing out on style.

Understanding the SEO impact of site speed

Site speed has been an important SEO factor for a while on desktop devices, but since July 2018, it is now a ranking factor for mobile devices. So, if a user is searching on Google using a mobile device and the site takes longer to load, then it will be less likely to rank as highly as sites that load faster. 

Site speed is important in many ways, but it can actually have a huge impact on SEO. In fact, site speed is now a core metric in Google’s algorithm and should be regularly reviewed. Simply said, if your website’s site speed is slow, it would probably be beneficial to do something about it.

Not only is site speed a direct ranking factor, but it can cause poor UX, increase the bounce rate and decrease a user's time on site, which will have a negative impact on your site's SEO performance.

Imagery can be one of the items to optimise, and can contribute to a drastic improvement in site speed, which if optimised, can result in positive rankings and an increase in website traffic. One of the recent trends being discussed in the industry is progressive JPEGs, which we’ll get onto shortly.

Why you should optimise your imagery

Having large images on your website will slow it down. With images making on average 54% of a total webpages weight, one of the best ways of improving your website speed is by ensuring the images you add to your site are optimised.

To put it simply, to optimise an image you need to reduce its file size. And as we’re aware, not everyone has access to fancy image editing software such as Photoshop. However, there are free websites out there that allow you to optimise images with ease. Sites like jpeg.io and kraken.io offer free online image optimisation.

Progressive JPEGs

There are two types of JPEGs, baseline (default) and progressive.

Progressive JPEGs are great from a user perspective. We’ve all been on image heavy sites where there are lots of white blocks because the images haven’t loaded in yet. And we all know how frustrating that can be. For a first time visit, a site that’s slower to load and has white blocks of unloaded content isn’t the best first impression and definitely won’t impact your brand in the manner that you will have intended.

When a baseline JPEG is loading, it loads from top to bottom. However, a progressive JPEG uses a compression algorithm to load the image in successive waves until the entire image is fully displayed.

baseline vs progressive JPEGs

This means that the user will be presented with images straight away even if they’re not fully loaded. Instead of white space, users will see a lower quality (almost pixelated) version of the final image. This will gradually improve in quality until it’s fully loaded. Because something is displayed straightaway it gives the impression that the loading time is short but also allows the user to digest any content on the page while the imagery is loading. Image heavy websites such as Facebook and BBC News are great examples of those that use progressive images. 

So it sounds great...how do you make a progressive JPEG?

There are a number of different ways you can create progressive JPEGs depending on your skill set and the tools you have available. Here are three that are easily achievable:

  • Photoshop - When saving out a JPEG in Photoshop use “Save for Web” and check the “progressive” image option before saving out.
    Photoshop progressive
  • Sketch - Select the layer you’re wanting to export. Select “make exportable”, ensure JPG is select. Press Export and in the options select “progressive”.
    Sketch progressive

It’s worth noting that currently, progressive imagery works perfectly on Chrome, Firefox, and IE 9. Progressive images will still load on other browsers but only once the full image file has loaded.

In Summary...

With the ever-increasing rise in users browsing the web on mobile devices, as designers, we should consider both the end product and how a site looks while loading, educating our clients on ways they can ensure their website stays optimised, emphasising the importance of providing the end user with the best possible website experience. So, before you upload a new image to your CMS, think about whether it’s optimised and the potential negative impact that it could have if not.
Related posts
Adam Campion
Delete's Senior Designer, Adam Campion, takes a look at how design can lead the way in making change through charity, fundraising and other important causes.
GET IN TOUCH
Make enquiry

Delete Limited.

Registered in England.

03933385

Registered Address.

3370 Century Way, Thorpe Park, Leeds, LS15 8ZB

VAT Registration.

GB 927 1409 27