Find answers, guides, and tutorials to optimize your images.

Progressive JPEG

Updated on November 21, 2018

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
Progressive JPEG Example

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 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:

KeyCDN uses cookies to make its website easier to use. Learn more