Optimized images take less time to download, resulting in faster page loads. Page load time is one of the most important metrics for how users perceive the performance of your site. See Load: Deliver content under 1000ms to learn more.
There are two types of images: vector and raster. See Vector vs. raster images for an overview.
For simple geometric shapes like logos, use a vector format like SVG, as it can significantly reduce file size.
For complex images like photos, use WebP wherever possible. Browser support is not universal, though, so you'll need to use fallback mechanisms when WebP is not available. See How can I detect browser support for WebP? for an overview of techniques.
To determine how to encode your fallback image, in other words when to use PNG versus JPEG, see Selecting the right image format.
Remember to optimize your fallback images, too. See Tools and parameter tuning for some examples of optimization tools.
Lighthouse optimizes each image it finds on the page, and then compares the version used on the page against its own optimized version. The audit fails when one of the following conditions is met:
- A JPEG image could be at least 10KB smaller if its quality is set to 80 and its metadata is removed.
- An image could be at least 100KB smaller if it is encoded in WebP.
- The savings of encoding all images in WebP is greater than 1MB.
Was this page helpful?