Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Efficiently encode images

Overview

When looking at your page requests, images likely account for the bulk of your total page size compared to HTML, CSS, or JavaScript files.

If these images are uncompressed, they waste bandwidth and increase page load times because the browser must spend more time downloading them.

Efficiently encoding images reduces your page size and contributes to a faster loading page.

How does your site score on this audit?

How does efficiently encoding images affect page performance?

Uncompressed images are likely served at very high quality, resulting in a large file size.

The larger the image, the more time the browser spends downloading them, further increasing the time your visitors spend waiting for the page to load.

When this happens for multiple images on your page, the file sizes can add up significantly and result in a very slow page.

Efficiently encoding images i.e., serving compressed images, can reduce image file sizes and speed up image downloads for an ultimately faster loading page.

How efficiently encoding images can help performance
Efficiently encoding (i.e., compressing) images can reduce your total page size, resulting in a faster loading page.

There are 2 types of compression algorithms commonly used, namely:

  • Lossy compression - reduces file sizes at the expense of image quality.
  • Lossless compression - reduces file sizes without sacrificing quality.

To learn more, read our What does image optimization mean? article.

How does GTmetrix trigger this audit?

GTmetrix evaluates all the JPEG and BMP images on your page and compresses them to 85% of their original quality.

If the compressed image is at least 4KB smaller than the original image, it is flagged. Clicking the audit on the GTmetrix report lists the relevant images.

Expanded view of the Efficiently encode images audit
Clicking the audit reveals the images that can be compressed for a faster loading page

GTmetrix also estimates the file size savings that could be achieved through serving compressed images.

How to efficiently encode images?

There are a few strategies to efficiently encode images, such as:

1) Manually compressing images

We've previously written a Practical Guide on How to Optimize Images, which highlights the manual method to compress your images.

Resizing images
Efficiently encode your images using our guide - How to Optimize Images: A Practical Guide.

Read our guide here.

2) Using an Image CDN

You can use an Image CDN to serve images that are optimally compressed, resized to the visitor's viewport, and served from the closest geographic location to your visitor.

How Image CDNs work
Image CDNs help you process and serve images specific to your visitors needs.

A bonus is that you do not need to build image optimization practices into your development workflow, as the Image CDN can handle all things image-related on your production websites.

Image CDNs process images on the fly
Image CDNs can process images on the fly in whatever format or dimensions you need.

Read more about Image CDNs here.

3) Using CMS Plugins (For WordPress or other CMS)

CMS users (e.g., WordPress, Shopify, etc.) can use a plugin to compress and optimize image delivery.

Click here to learn more about optimizing images for WordPress.

Summary

 **