Efficiently encode images
The Opportunities section of your Lighthouse report lists all unoptimized images, with potential savings in kilobytes. Optimize these images so that the page loads faster and consumes less data:
How Lighthouse flags images as optimizable
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.
How to optimize images
There are many steps you can take to optimize your images, including:
- Compressing images.
- Replacing animated GIFs with video.
- Lazy loading images.
- Serving responsive images.
- Serving images with correct dimensions.
- Using WebP images.
Optimize images using 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.