According to the HTTP Archive, images are the dominant form of content on the web today. They account for the largest number of requests when loading a webpage as well as the most amount of data that is transferred to the client. This is a continuing trend. Clearly learning how to properly optimize images is a requirement for improving your website’s performance.
Unfortunately, when people talk about image optimization in the context of front-end web performance, they are almost exclusively talking about lossless image optimizations. These lossless optimizations focus on reducing image size by removing non-graphical content from file such as comments, metadata, unused color entries, etc. Another source of lossless optimizations I’ve written about before is focus instead on using more efficient compression techniques, either with PNG’s use of DEFLATE or JPEG’s quantization tables.
At the end of the day however, the vast majority of data inside of a JPEG or a PNG or anyway graphics files is the graphical data itself. To see any significant reductions in the size of images, we must consider optimizing this graphical data in a lossy way. Optimizing images in a way that alters how they look is a scary concept, but amazing reductions in image size is possible with minimal changes to the way your images look.
Lossy image optimization is an important topic, especially given that images are only getting larger and becoming more and more of a contributing factor to front-end web performance. I plan to discuss this topic in future blog posts. For now, I’ve uploaded the slides from the presentation Take it all Off! Lossy Image Optimization that I gave at the Velocity conference in 2011. They provide a great introduction to lossy image optimization, and provides advice on when you can implement lossy optimizations to significantly optimize your website’s images without reducing their visual awesomeness.
Want to know how your website’s performance could be better? Zoompf’s free performance report analyzes your website for over 400 performance issues.
The post Achieving Better Image Optimization with Lossy Techniques appeared first on Zoompf Web Performance.