Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

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.

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.

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?