Progressive Images
Delivering content to users as efficiently and quickly as possible greatly influences a website's conversion rates and recurring visits. According to HTTP Archive the average size of a webpage is 2,219 KB with 1,421 KB, 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 Book of Speed, the following data plot represents a study of 10,000 JPEG images from all over the web.
Images of file size 10 KB and over have a better chance of being smaller when using the progressive JPEG format. The difference could be up to 10%.
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 Coding Horror, the results of saving an interlaced PNG vs. non-interlaced resulted in the following:
PNG, interlaced = 288 KB
PNG, non-interlaced = 212 KB
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.
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.
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.