Do you use responsive images, lazy loading, or other optimizations? If not, why not? What affects your decisions?
Answer a few simple questions to help us understand your needs, and what we can do to make your life easier. Get Started

Optimize Images

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.

Audit source

Feedback

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.