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.

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 imageoptimization.info

The site includes techniques such as:

• Data URIs
• Lazy Loading Images
• Sprites
• Compressive images
• WebP images (and code to convert to the WebP format)
• A list of useful image optimization tools

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.