Properly size 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
Properly size 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 images in your page
that aren't appropriately sized,
along with the potential savings in kibibytes (KiB).
Resize these images to save data and improve page load time:
How Lighthouse calculates oversized images
For each image on the page,
Lighthouse compares the size of the rendered image against the size of the actual image.
The rendered size also accounts for device pixel ratio.
If the rendered size is at least 4KiB smaller than the actual size,
then the image fails the audit.
Strategies for properly sizing images
Ideally, your page should never serve images that are larger than the version
that's rendered on the user's screen.
Anything larger than that just results in wasted bytes and slows down page load time.
The main strategy for serving appropriately sized images is called "responsive images". With responsive images, you generate multiple versions of each image,
and then specify which version to use in your HTML or CSS using media queries, viewport dimensions, and so on. Additionally, RespImageLint is a helpful bookmarklet for identifying the optimal srcset and sizes values for your images. See Serve responsive images to learn more about these attributes.
Image CDNs are another main strategy for serving appropriately sized images.
You can think of image CDNs like web service APIs for transforming images.
Another strategy is to use vector-based image formats, like SVG.
With a finite amount of code, an SVG image can scale to any size.
See Replace complex icons with SVG to learn more.
Tools like
gulp-responsive or
responsive-images-generator
can help automate the process of converting an image into multiple formats.
There are also image CDNs which let you generate multiple versions,
either when you upload an image, or request it from your page.
Stack-specific guidance
AMP
Use the
amp-img
component's support for
srcset
to specify which image assets to use based on the screen size. See
also Responsive images with srcset, sizes & heights.
Angular
Consider using the BreakpointObserver utility in the Component Dev
Kit (CDK) to manage image breakpoints.
Drupal
Ensure that you are using the native Responsive Image Styles provided from Drupal. Use the Responsive Image Styles when rendering image fields through view modes, views, or images uploaded through the WYSIWYG editor.
Gatsby
Use the gatsby-image plugin to
generate multiple smaller images for smartphones and tablets. It can also create
SVG image placeholders for efficient lazy loading.
Joomla
Consider using a responsive images plugin.
WordPress
Upload images directly through the media library to ensure
that the required image sizes are available, and then insert them from the media
library or use the image widget to ensure the optimal image sizes are used
(including those for the responsive breakpoints). Avoid using Full Size images
unless the dimensions are adequate for their usage. See Inserting images into posts and pages.
Resources
Source code for Properly size images audit
Serve images with correct dimensions
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
Русский
עברית
العربيّة
فارسی
हिंदी
বাংলা
ภาษาไทย
中文 – 简体
中文 – 繁體
日本語
한국어