Progressive JPEGs are jpg image files that were encoded in such a way that when displayed they are loaded in layers.
From a low resolution first preview to a high definition, detailed image once fully loaded.
How can progressive jpg images be used to improve UX and page speed performance?

How are progressive jpegs made?

JPG files have a number of encoding formats.
“Progressive” is just another encoding (or compression) type.

When you take a picture on a camera or a smartphone, More often than not the picture is saved as jpg file.
That’s because jpg files provide a great disk space to quality ratio by slightly compressing the image, Making it a smaller file size to storage and faster to send across the network.

Most jpg image files that are created via cameras or even photo manipulation software (Photoshop for instance) are encoded as “Baseline jpgs”.
I actually don’t know why the default encoding is “Baseline” and not “Progressive”, I tried looking around online for an answer but i haven’t come to a conclusive one.
Please feel free to enlighten me in the comments section.

In order to create or convert a jpg file to a “Progressive jpg” all that needs to be done is to save (or re-encode) the file using the progressive jpg algorithm.

What do Progressive jpgs look like?

Progressive JPGs look exactly the same as regular (“Baseline”) jpg images.
What’s unique about progressive jpgs is the way they are displayed while they are loading.

While regular jpg files are loaded in stripes, from top to bottom – Progressive image files are loaded from a low quality full sized image to a high quality, detailed image. (see example below)

Demonstration of baseline jpg file while loading
Demonstration of baseline jpg file while loading
Demonstration of progressive jpg file while loading
Demonstration of progressive jpg file while loading

From a user experience perspective, I would argue that progressive jpgs provide a much better experience.
Especially for big images that consume a large size of the users’ screen space.
I think it’s a lot nicer to get a sense of the images’ contents while it loads.

Real world example

I have a friend who’s an artist and i’ve helped him create an online eCommerce store to sell his abstract paintings.
As you might imagine, For an art eCommerce site the size and quality of the images are very important.
Especially for large paintings where the users would most likely want to zoom in and view the painting from very close up so they can get a all the subtle details.

So we have a website that’s full of gigantic high quality images and they are the main focus of the users’ attention.
In this case the experience users get while loading images is a key factor in the general user experience on the website.

I’ve noticed that when a user first lands on a product page, The page loads with a blank white box (or a half filled white box) for a second or two as the paintings image loads.
It might not be obvious to everyone but i preferred to show a low resolution version of the image as it loads and avoid the blank white box.
I feel it gives the user a better experience.

It’s important to note that nowadays most users have a pretty fast network connection and the time it takes to load moderately sized images is pretty low.
Still, for a large image file if you use baseline jpgs you might see a blank box where the image would be.
If you use a progressive jpg the low quality layer of the image will appear instantly (or almost instantly).
It gives the user a sense the page finished loading and is ready for interaction.

Art eCommerce product page first frame with baseline jpg
Art eCommerce product page first frame with baseline jpg
Art eCommerce product page first frame with progressive jpg
Art eCommerce product page first frame with progressive jpg

How does progressive jpeg impact page speed performance?

For some reason jpg files that are encoded are usually of smaller file size.
At least for the tests i’ve made, I noticed that for large, high quality images – progressive jpgs are usually a tad smaller than their baseline counterparts.

I can’t really say whether or not this small reduction in file size is significant in most cases
What i can say for sure is that although progressive jpegs might not make an impact on actual page speed performance – They definitely make a huge impact on perceived page speed performance.
Once the users feel like the page loading is page and snappy they’re more likely to stay longer on the website and visit more pages. That’s always good for SEO and conversion rate.

How to convert images to progressive jpgs using GruntJS

For those of you who might not be familiar, GruntJS is a javascript task runner.
Developers can use GruntJS to automate repetitive tasks to save time and effort.

I’m using a very common GruntJS plugin called grunt-contrib-imagemin to automatically convert and compress all the image files in my projects.

The grunt-contrib-imagemin plugin allows developers to compress & convert all kinds of image files in a streamlined way.

If you’re a developer and you use npm and any kind of task runner i strongly suggest you check it out.