Skip to content
Learn Measure Blog Case studies About
On this page
  • How Lighthouse flags images as optimizable
  • How to optimize images
  • Optimize images using GUI tools
  • Stack-specific guidance
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Resources

Efficiently encode images

May 2, 2019 — Updated Jun 20, 2020
Available in: Español, 日本語, 한국어, Português, Русский, 中文, English
Appears in: Performance audits
On this page
  • How Lighthouse flags images as optimizable
  • How to optimize images
  • Optimize images using GUI tools
  • Stack-specific guidance
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • Resources

The Opportunities section of your Lighthouse report lists all unoptimized images, with potential savings in kibibytes (KiB). Optimize these images so that the page loads faster and consumes less data:

A screenshot of the Lighthouse Efficiently encode images audit

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

Optimize images using 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.

Stack-specific guidance #

Drupal #

Consider using a module that automatically optimizes and reduces the size of images uploaded through the site while retaining quality. Also, ensure you are using the Drupal's built-in Responsive Image Styles (available in Drupal 8 and above) for all images rendered on the site.

Joomla #

Consider using an image optimization plugin that 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 compresses your images while retaining quality.

Resources #

  • Source code for Efficiently encode images audit
Last updated: Jun 20, 2020 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

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.