A guide on how to pass the Optimize Images Lighthouse audit.
Overview
Optimized images load faster and consume less cellular data.
Recommendations
Click View details to see each JPEG or BMP image that can be optimized. Optimize each of these images in order to pass this audit.
The canonical guide for image optimization is Essential Image Optimization.
web.dev tutorials
web.dev has a collection of tutorials on the topic of optimizing images. See Optimize your images.
Explore different image formats
You might be able to yield significant savings just by changing image formats. For example, SVG is often the best way to store simple logos:
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 612 792" xml:space="preserve">
<g id="XMLID_1_">
<g>
<circle fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10"
cx="50" cy="50" r="40"/>
</g>
</g>
</svg>
Because the image is defined geometrically, this SVG code can zoom and scale to any size. And since it's stored as text, you can compress and minify the SVG.
See How do I choose an image format? to understand when to use each image format.
Provide multiple versions of an image
The picture element enables you to tell the browser to get a different version of an image, depending on the characteristic's of the user's device. See Art direction in responsive images with picture.
Image Optimization Web Services and CDNs
You might be better off letting a web service or CDN optimize your images for you. See Does an image processing CDN make sense for you? to understand if these options are right for you.
Image optimization CDNs:
Image optimization APIs:
GUI tools
Another approach is to run your images through an optimizer that you install onto your computer and run as a GUI. For example, with ImageOptim you drag and drop images into its UI, and then it automatically compresses the images without compromising quality noticeably. If you're running a small site and can handle manually optimizing all images, this option is probably good enough.
Squoosh is another option. Squoosh is maintained by the Google Web DevRel team, the team that runs developers.google.com/web.
Command line tools
The section below lists various command line image optimization tools that you can integrate into your build toolchain.
JPEG:
PNG:
GIF:
More information
Lighthouse 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 4KB or greater, Lighthouse flags the image as optimizable.