Progressive JPEG

Progressive JPEG images are used everywhere these days. Optimus also creates progressive JPEGs as output. But what’s the difference between progressive and regular (baseline) JPEGs?

Progressive JPEGs vs Baseline JPEGs

Normally JPEGs will load from top to bottom, these are known as baseline images. Progressive JPEGs are different in that they show the entire image right away, but only load some of the data, meaning it might look slightly pixelated until the image fully loads. You can see examples below.

Baseline JPEG Example

baseline JPEG

Src: darnoffice

Progressive JPEG Example

Progressive JPEG

The benefits of progressive JPEG images

Depending on the file size, progressive JPEGs can be much better optimized, resulting in a smaller output size (leading to faster load times). Modern browsers can display JPEG images more quickly if they were created using a progressive method. Safari and IE 8 are not compatible with the advantageous compression and display these JPEGs at regular speed (meaning without a performance improvement) within a website. In this context, it is important to note that something is shown more quickly to the reader when using progressive JPEGs, as the image changes from a rough to a high-quality display.

At http://codepen.io/sergejmueller/full/GJKwv you can find a convenient tool for you use that shows you whether images are progressive JPEGs. It can easily be tried out by comparing JPEG images to each other before and after uploading them to WordPress while Optimus is activated.

More links on the topic of progressive JPEGs:
https://en.wikipedia.org/wiki/JPEG#JPEG_compression
http://www.bookofspeed.com/chapter5.html
http://www.webmonkey.com/2013/01/the-return-of-the-progressive-jpeg/
http://www.yuiblog.com/blog/2008/12/05/imageopt-4/

  • Mazahir Merchant

    HOW TO CONVERT THE IMAGES OF JPEG TO PROGRESSIVE JPEG