The Opportunities section of your Lighthouse report listsall unoptimized images, with potential savings in kibibytes (KiB).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 4KiB or greater, Lighthouse flags the image as optimizable.
How to optimize images
There are many steps you can take to optimize your images, including:
- Using image CDNs
- Compressing images
- Replacing animated GIFs with video
- Lazy loading images
- Serving responsive images
- Serving images with correct dimensions
- Using WebP images
Another approach is to run your images through an optimizerthat 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 noticeably compromising quality.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.
Stack-specific guidance
Drupal
Consider using a modulethat automatically optimizes and reduces the size of images uploaded through thesite while retaining quality. Also, ensure you are using the Drupal's built-inResponsive Image Styles(available in Drupal 8 and above) for all images rendered on the site.
Joomla
Consider using an image optimization pluginthat compresses your images while retaining quality.
Magento
Consider using a third-party Magento extension that optimizes images.
WordPress
Consider using an image optimization WordPress plugin that compressesyour images while retaining quality.
Resources
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2019-05-02 UTC.
[{ "type": "thumb-down", "id": "missingTheInformationINeed", "label":"Missing the information I need" },{ "type": "thumb-down", "id": "tooComplicatedTooManySteps", "label":"Too complicated / too many steps" },{ "type": "thumb-down", "id": "outOfDate", "label":"Out of date" },{ "type": "thumb-down", "id": "samplesCodeIssue", "label":"Samples / code issue" },{ "type": "thumb-down", "id": "otherDown", "label":"Other" }] [{ "type": "thumb-up", "id": "easyToUnderstand", "label":"Easy to understand" },{ "type": "thumb-up", "id": "solvedMyProblem", "label":"Solved my problem" },{ "type": "thumb-up", "id": "otherUp", "label":"Other" }]
