Image optimization: Lossy, lossless and other techniques

During last days I have come across interesting articles about images optimization. Images are currently the largest average payload in web sites, meaning a 62% of all the bytes. With the increasingly importance of responsive design, responsive images are becoming a challenge to face.

I have already talked about image optimization in my list of optimization techniques and my short post about using jpegoptim. But recently I have read about highly compressed JPG to target high-res screens and progressive JPG images, and I thought it would worth sharing.

Highly compressed JPG images and high resolution screens

Compressive Images is a post by Filament Group where they show a way to target responsive images. Instead of using multiple copies of an image with different sizes, you can generate a large JPG image with a compression of 0 quality. That way, not only one single copy can be used to target different screen sizes and resolutions, but there are even large savings in file size comparing to normal 1:1 images.

I have prepared a demo of the Compressive Images technique where you can test your own images.

Info: Note that this technique might have a high impact on decoding + resizing, especially on mobile. Tim Kadlec explained it at Velocity SC 2015 in his Mobile Image Processing talk.

Progressive JPEGs

Thanks to Progressive jpegs: a new best practice I have learnt that progressive JPGs normally weight less than baseline ones. Not only that, but they make some browsers start rendering the image sooner, preventing showing a white chunk until the full image is downloaded. By using tools such as imageoptim, which runs jpegtran behind the scenes, you can make sure the smallest file is chosen.

That post also links to Optimizing Images, a chapter from Stoyan Stefanov's Book of Speed. In that chapter, Stoyan compiles the main tools to achieve lossless compression of JPG, PNG and GIF images.

If you want to see progressive images in action, check this demo made by @patmeenan that showing how a JPG is rendered in progressive and baseline mode, and the resulting image of every scan. You can even try with your own image.

Lossy techniques

To end with, in Giving Your Images An Extra Squeeze you can see how lossy compression tools can help go the extra mile and reduce even more the size of your images, while keeping quality. It is a nice read about tools such as pngquant and imgmin, as well as the WebP format.

More resources

If you are interested in image optimization, I recommend you to have a look at Image Optimization Tools, an article by Addy Osmani.