Don't Let Your Hero Image Be the Villain: Best Practices for Image Optimization
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.
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.