Skip to main content Accessibility Feedback

Progressive JPGs for WordPress

James Foster made an awesome addition to my Image Compress & Sharpen plugin for WordPress: progressive JPGs.

Why progressive JPGs are awesome #

If you’re not familiar with the term, there are a few variants of JPG.

The most common on the web is the baseline JPG, which starts rendering at the top of the image and builds down. Progressive JPGs, on the other hand, render the entire image in low resolution, then add a slightly higher resolution layer, and so on, until the entire image is rendered.

Progressive JPGs are often slightly smaller, though not by a lot. What really makes them preferable is that for supporting browsers, content is rendered faster than with baseline JPGs.

Some things to consider #

The key word here is “supporting.”

For IE 8, background images in IE 9, and a few other browsers, progressive JPGs can actually render slower than baseline JPGs. They’re still displayed, but non-supporting browsers wait until they’re downloaded completely before rendering. You learn more about the pros and cons on Performance Calendar, Performance Matters, and Blurb Herd.

I’ve considered making progressive JPGs the default, but for now, I’ll leave the option up to you. Download Image Compress & Sharpen on GitHub.

🚀 Make 2018 the year you master JavaScript! My pocket guides and mini courses are short, focused, and made for beginners. You can do this!

Have any questions or comments about this post? Email me at or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips