The Ultimate Image Optimization Cheat Sheet

Images play a massive role in modern web development today. They comprise of around 62% of the average page’s total payload, which is an astonishing amount! In terms of web page performance, images can be a huge performance roadblock, but they don't have to be. Simple image optimization techniques can make a massive difference to your page load times and significantly reduce the overall weight of your page.

5 Image Optimization Best Techniques

Together with my good friend, Robin Osborne, we presented a talk at last years Velocity Conference based on the importance of optimizing images. As part of the talk, we compiled a list of image optimization best practices along with some live examples that the audience could interact with as we moved through the slides. We have created a website for these examples that is live and available to view at

The site includes techniques such as:

We would love to grow this list of image optimization best practices and add new techniques as they become available. That's where you come in! All of the code has been open sourced and is available to browse on Github. We would love you to contribute and add any image best practices that you find or you feel would be useful.


Zak - 8/25/2014
Lazy loading images is evil. It assumes you don't request the page and switch to another tab and continue working while you wait for the page with plenty of images to download in the background. It means you can't allow things to happen without the user actaully scrolling. It's wrong.

Okke - 1/9/2015
@zak: why evil? Should you always use them? No. But on a site like pinterest for instance, I would not want it to download what might be thousands of images. Same thing on a mobile phone. I don't want it to be busy loading when it doesn't have to. More responsive and better data usage.

Add your comment

300 Characters left

Please fill this in to confirm that you are human