Efficiently encode images
This means that the URL contains images that are unoptimized.
Why is this important?
For years, optimizing images has been a staple recommendation of improving website performance. And with good reason, since almost every page on the internet using contains images, and image optimization can easily be overlooked.
Image optimization is a valuable process because it allows you to serve images that are smaller in size (KiB) and therefore download faster, yet are not noticeably different to the user.
What does the Hint check?
This Hint will trigger for any internal URL that contains JPEG or BMP images which could be compressed by at least 4KiB.
In order to do this, Sitebulb collects all the JPEG or BMP images on the page, sets each image's compression level to 85, and then compares the original version with the compressed version. If the potential savings are 4KiB or greater, Sitebulb flags the image as optimizable.
How do you resolve this issue?
Whilst the task itself of optimizing images is pretty straightforward, the way in which you approach this issue is not.
In general, it needs to be a two stage process:
- Tackle the issues with existing uncompressed images on the website
- Put in place a process to ensure that new images are compressed before being uploaded
On a small website, both of these issues can be handled by a straightforward compression web tool like TinyJPG or ImageOptim. When tackling existing images, you would want to start with the biggest images first and work your way down the list. In terms of an ongoing process, this is more about communicating with content teams and ensuring they include image compression as part of their workflow when adding new content to the website.
On a larger website, the 'manual' solution above is not really suitable, and you will need to discuss with your developer how this can be achieved in a scalable manner.
Some methods include:
- Use image CDNs to optimize images
- Use a compression plugin
- Install a stack-specific module or extension
Further Reading
- Efficiently encode images (Lighthouse documentation)
- How to Optimize Images for Web and Performance
- Top 9 Tips to Optimize Images
