Why Progressive Images Matter

Images are typically the most bandwidth demanding element of a page and their impact is most often mitigated by resizing them or reducing their quality.  Progressive images are another option in your toolbox to optimize your end user’s experience of a web site.  Progressive images allow you to provide a more compelling user experience as well as reduce your overall bandwidth and storage footprint.

Progressive vs. Baseline Images

The majority of JPEG images you see on the web are compressed using a “baseline” algorithm.  These images load from top to bottom, rendering each line of pixels in the full quality of the overall image.  As a result, blank space may appear on the page until the image is fully downloaded.

Progressive images, however, display in their full dimensions at a lower quality resolution, giving the image a blurry or pixelated look.  This initial rendering is replaced by successive “scans” of increasing quality until the image is fully loaded.

The ability to create these scans owes to technical details as to how JPEG image data is compressed.  For those that are interested, these details of are discussed in depth in Addy Osmani’s Essential Image Optimization guide. The effect of using progressive images is to give end users a sense of the overall picture even if the details are not yet clear.

The screenshots below captured from Chrome’s developer tools simulating a slow 3G connection illustrate the differences between how baseline and progressive images are rendered.

 

When to Use Progressive Images (and When to Avoid Them)

The primary advantage of Progressive images is their ability to convey visual information to end users on slower connections faster than they would otherwise see it.  The overall wait time for a “good” scan of a progressive image is roughly two thirds of that of a baseline image.  This effect can create the perception of that the site is more responsive as a whole.  The difference can be seen in the above illustrations of the rendering of the two different types of JPEG images — note the time markers below the images — the lesser quality scan is visible in less than 700 milliseconds.  For the same image, only a fraction of the baseline version is visible.

More concretely, for larger images, progressive JPEG images tend to be smaller in size than their baseline encoded counterparts.  Progressive JPEG images over 10K in size are typically 2% to 10% smaller in size compared to those compressed with a baseline algorithm.   This in of itself will decrease a website’s storage, load time and bandwidth demands.  Conversely JPEG images that are less than 10K tend to be smaller as baseline images (note that this is not a hard and fast rule, but rather a rule of thumb).  Any measurable decrease in the overall load time of the page will have an effect on your ability to retrain your users, as illustrated by the chart below.

Although support for progressive images is widespread among the most popular browsers, it is not universal.  When progressive JPEGs are received by browsers that do not support them (such as versions of Internet Explorer before Windows 7) the software displays the image only after it has been completely downloaded.

Progressive images are also more taxing on CPUs as each progressive scan requires about the same amount of CPU as the entire baseline JPEG would take to render. This can be an issue for mobile devices.

Another potential drawback of using progressive images is that is may be difficult for end users to determine when a progressive image has been fully downloaded.  Users may perceive the image as simply being blurry.  This is more of an aesthetic issue and will be a judgement call based on your content and its usage.

Combining progressive images with responsive images can give users a better experience.  Filestack allows images to be rendered across different devices with different resolutions, and whether the image is a progressive image can also be part of your overall optimization strategy.

Creating Progressive Images With Filestack Transformations

While most image creation software such as Photoshop will have options for selecting a progressive compression algorithm when you manually export an image as a JPEG, Filestack allows the creation of progressive JPEGs to be done programmatically, enabling you to integrate them easily into your website or application.  Creating to a progressive JPEG is merely a matter of specifying the output format as “pjpg” — so you will add output=f:pjpg as part of your URL to filestack API.

 

To turn an existing image into a progressive image you would take its original URL:

https://upload.wikimedia.org/wikipedia/en/9/95/Legendary_kiss_V%E2%80%93J_day_in_Times_Square_Alfred_Eisenstaedt.jpg

And turn it into the following:

http://process.filestackapi.com/<API_KEY>/output=f:pjpg/https://upload.wikimedia.org/wikipedia/en/9/95/Legendary_kiss_V%E2%80%93J_day_in_Times_Square_Alfred_Eisenstaedt.jpg

This syntax allows the creation of progressive JPEGs to be chained with any other operations you wish to do with the image. In the following example, the image is first resized and then converted it to a progressive JPEG:

http://process.filestackapi.com/resize=width:750/output=f:pjpg/https://upload.wikimedia.org/wikipedia/en/9/95/Legendary_kiss_V%E2%80%93J_day_in_Times_Square_Alfred_Eisenstaedt.jpg

Because the conversion between baseline and progressive JPEGs is lossless, there is some flexibility in how you order this operation with other transformations that you do.  A detailed list of formats that you may convert to a JPEG can be found in the Filestack documentation on transformation.

How Else Can I Optimize My Images?

Looking for additional options for how to improve your website’s performance by reducing the footprint of your images?  Here are some suggestions as to how else you can use Filestack to improve your website’s download time and therefore your end user experience:

• Filestack offers a standalone task specifically for compressing images.
• Optimize your JPEG files for web delivery by changing their quality.
• Filestack allows you to cache your files in a user’s browser by setting an HTTP response cache control header.

Good luck and happy optimizing.

Read More →