Aesthetics aside, when it comes to visually representing your brand, optimization of images is not only imperative, but also a necessity. How do you know that hero image you're using on your homepage isn't affecting the load time of your website? Are you observing your page performance data in correlation to user metrics? It's important to get a clear picture of how image size can affect your website's performance. For some, this task can be complex and time-consuming to handle on your own. Here are some best practices — and a few pitfalls to watch out for — so that your site can achieve the best results.
Best Practices
1. Use the right compression. Use a Structural Similarity Index Algorithm to ensure that image quality isn't degraded beyond what the human eye can detect. This way, you can find the sweet spot for the balance between image quality and file size. Hero images — i.e., large banner images that are prominent on a page — can end up being the villain against the total loading time of a website if they aren't optimally compressed. For example, an uncompressed 1024 x 768 JPG image can have a 3 MB file size!
2. Use the right dimensions. Ensure that images are correctly sized (width and height) as well as have the correct pixel density for the image size. Most content management systems and web applications lack dynamic capabilities to serve the correct format based on the browser in use. A giant image is a giant image, and using a 1024 x 768 PPI image in a 256 x 192 space wastes resources. It takes longer to download, uses more bandwidth and can take even more rendering time to use a large image in a small space.
3. Use the right format. For best results, be sure to select the right format for each browser. While all browsers support PNG and base JPG formats, there are better formats that offer greater compression abilities for specific browsers, such as WebP for Chrome, JPGXR for Internet Explorer, JPEG2000 for WebKit, etc.
4. Test an automation solution. In order to implement all of these best practices, you would need more than 20 images for each base image. There are a lot of combinations, and often more management than you can handle manually. You can give it a try with srcset, but in reality, you need an automation solution. There are a host of automation solutions that enable site owners to output a single site image, and the image optimization solution will automatically create and maintain all the variations.