Efficiently encode images  |  Lighthouse  |  Chrome for Developers
Skip to main content
Docs
Build with Chrome
Learn how Chrome works, participate in origin trials, and build with Chrome everywhere.
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
Create the best experience for your users with the web's best tools.
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Get things done quicker and neater, with our ready-made libraries.
Workbox
Puppeteer
Experience
Design a beautiful and performant web with Chrome.
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
More from Chrome and Google.
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Case studies
Blog
New in Chrome
/
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어
Sign in
Docs
Lighthouse
Docs
More
Case studies
Blog
New in Chrome
Build with Chrome
Web Platform
Capabilities
ChromeDriver
Extensions
Chrome Web Store
Chromium
Web on Android
Origin trials
Release notes
Productivity
DevTools
Lighthouse
Chrome UX Report
Accessibility
Modern Web Guidance
Workbox
Puppeteer
Experience
AI
Performance
CSS and UI
Identity
Payments
Privacy and security
Resources
All documentation
Baseline
web.dev
PageSpeed Insights audit
Isolated Web Apps (IWA)
Home
Docs
Lighthouse
Efficiently encode images
Stay organized with collections
Save and categorize content based on your preferences.
Warning: This audit has moved into the Improve image delivery insight as of Lighthouse 13. For more information see What's new in Lighthouse 13.
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:
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 noticeably compromising quality.
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 native Responsive Image Styles provided from Drupal 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
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. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2019-05-02 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2019-05-02 UTC."],[],[]]
Contribute
File a bug
See open issues
Related content
Chromium updates
Case studies
Archive
Podcasts & shows
Follow
@ChromiumDev on X
YouTube
Chrome for Developers on LinkedIn
RSS
Terms
Privacy
Manage cookies
English
Deutsch
Español – América Latina
Français
Indonesia
Italiano
Nederlands
Polski
Português – Brasil
Tiếng Việt
Türkçe
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어