Progressive JPEG Images help Speeding Up Your Website

This post will compare baseline and progressive JPEGs, and demonstrate how the use of progressive images increases both the website speed, and the user experience.

JPEG stands for Joint Photographic Experts Group. Its origin dates back to 1992, and images using the format are filed as .jpeg or jpg

JPEG images are most ideal for photos and photorealistic images with distinct colour and tone. Owing to the effectiveness of the format, it is heavily used in websites, with statistics indicating that as many as 73% of all websites use them.

Progressive JPEG

A progressive JPEG image uses compression algorithms that load the images in successive steps until the whole image is displayed. The unique advantage of this loading technique is that it gives the user the illusion of speed, as the entire image is visible before it becomes clear. It is different from the conventional way JPEGs load, which is slowly, starting from the top, and going down in a linear fashion.

The example below will make it easier to understand this difference.

Baseline vs. progressive- 30% loaded

From this baseline JPEG, it’s clear that only a small part is visible. The resolution might be low, but the entire progressive version can be viewed instantly.

Baseline

Progressive

Baseline vs. progressive- 70% loaded

As the progressive JPEG continues to be populated, there is an increase in quality resolution. The details of the image are clearer, even though only 70% has loaded so far.

Baseline

Progressive

A More Refined User Experience

During the late 90s, before the GIF format became mainstream, progressive JPEGs were highly popular, owing to the slow internet connectivity that relied on dial-up. The current landscape is different – smartphones with slow connectivity or those with high resolution displays that need larger images have slowed the load time for images.

With the traditional baseline JPEGs, blank spaces are left on the screen until the image has fully loaded. This makes the web pages appear slower in loading. This is unlike progressive JPEGs, where the perception is that of much faster load times, as there are no whitespaces. The full resolution of the image is achieved later, but after the page has seemingly already loaded.

Browser

Modern browsers including Chrome, Firefox and IE9 all support progressive images well. The only browsers that do not are IE8, but it has a minimal effect as only a sparse 0.4% of people use it or earlier versions.

For those browsers that don’t support these images, they will nonetheless still be displayed, but after the whole file has loaded.

Creating Progressive JPEGs

Currently, most photo editors will, by default, save an image as a baseline JPEG. Until 2015 ‘Smushit’ was the editor of choice for image optimisation, and it converted them to the progressive format.

Many of the photo editing tools currently used, such as Photoshop, Fireworks and ImageMagick, can save a picture in the progressive format, but you first have to load the image into the tool and resave it.

Photoshop

Photoshop has unarguably been the go-to editor for many, but Adobe’s decision to remove the option of saving an image in progressive format has made things a bit more difficult. Thankfully though, there is the ‘save for web’ menu still available. You can access it through file>export>save for web (legacy)>tick progressive.

For older versions of Photoshop, go to file>save for web to access the suitable interface.

Kraken.io

This is the successor for the old Smushit service Kraken.io and it can be used through a web interface, or integrated into WordPress or others.

The web interface is intuitive, but the free plan allows only one file to be uploaded at a time, for sizes up to 1MB. You can choose high compression – lossy – or lossless.

The WordPress plugin works only for a time (until 50MB is used up) so you might want to upgrade to the premium plans.

The WordPress plugin automatically optimises and converts the image files you upload. For your existing files, you can optimise them through the Media Library.