Support

Find answers, guides, and tutorials to supercharge your content delivery.

Progressive Images

Updated on November 21, 2018

Delivering content to users as efficiently and quickly as possible greatly influences a website’s conversion rates and recurring visits. According to httparchive.org the average size of a webpage is 2219kb with 1421kb, or 64%, being attributed to images. As images play a major role in the size of most websites, they are often a main cause of slow loading times. Therefore, anything that can be done to help improve a user’s overall experience through the use of image optimization is highly valuable.

What Are Progressive Images?

This is where progressive images come into play. A progressive image is interlaced meaning the image will start out as low quality, however will continue to improve in resolution with each additional “pass”. Traditionally, images load from the top-down (for JPEG images these are called Baseline JPEG). This results in the user having to wait until the complete image is loaded in order to see what it is. Progressive images give the end user a better idea of what the image will be (in lower quality) before it is completely downloaded.

This is not the only benefit to progressive images, they also have the capability of reducing a JPEG image’s file size. According to bookofspeed.com, the following data plot represents a study of 10,000 JPEG images from all over the web.

Images of file size 10Kb and over have a better chance of being smaller when using the progressive JPEG format. The difference could be up to 10%

progressive image trendline
Source: bookofspeed.com

However, not all image formats react the same to interlacing. PNG images are known to actually increase in size when enabling interlacing. According to a post by codinghorror.com, the results of saving an interlaced PNG vs. non-interlaced resulted in the following:

PNG, Interlaced = 288Kb

PNG, Non-Interlaced = 212Kb

Based on these findings, a 35% increase in size was seen once interlace was enabled for a PNG image. This increase does not warrant the benefit of interlacing for PNGs as this file format renders in a perfectly acceptable way without the need for interlacing.

Progressive JPEG Image Example

To display how a progressive JPEG image loads compared to a baseline JPEG, consider the following example.

baseline vs progressive jpeg
Source: sixrevsions.com

As can be seen, we must wait for the complete baseline image to download before seeing what the image is in its entirety. Alternatively, with a progressive image (although blurry) we see the full image much sooner.

Unless an image is very large or you are accessing an image over a slow internet connection, the interlacing process is not very noticeable. However with savings in size, utilizing progressive JPEG images can result in load time savings compared to baseline images.

This example demonstrates the different between a baseline image and progressive image as they are simultaneously loaded at very slow speeds.

Saving Images As Progressive JPEG

Saving an image to render progressively is quite easy. Optimus automatically outputs progressive JPEG images when a JPEG file is optimized. Therefore, your website visitors can enjoy the benefits of progressive JPEG images without you needing to remember to convert them.

If you are using an image editing software such as Photoshop, this can be upon saving the image. An interlacing can also be selected for PNG and GIFs although it is not recommended due to the size increase as mentioned above. and JPEG images.

To save a JPEG image as progressive in Photoshop, select progressive option and define the amount of scans or “passes” that should be used when loading the image.

jpeg progressive

With the ability to reduce JPEG image sizes, and offer a better viewing experience for users, Optimus makes it easy to implement progressive JPEG images on your website.