Properly Size Images

When PageSpeed Insights or Lighthouse tells you to properly size images, it has found image files that are much larger, in pixels, than the box they are displayed in. A 3000px-wide photo shown in a 400px-wide card is the classic case: the visitor downloads far more image data than the screen can show.

From PerfDelta's measurements: Lighthouse reports this finding on 74% of 4,108 measured home pages. The median estimated saving is 1570 ms. More in the data section below.

What the "Properly size images" audit measures

Every image has two sizes. The intrinsic size is the real pixel width and height of the file. The displayed size is the space the image occupies in the layout, in CSS pixels. Lighthouse (audit id uses-responsive-images) compares the two for each image on the page and estimates how many bytes a correctly sized file would save.

The comparison takes the device pixel ratio into account. A high-density screen with a ratio of 2 packs two physical pixels into each CSS pixel in each direction, so an image displayed 400 CSS pixels wide needs a file about 800 pixels wide to look sharp there.

This audit is about dimensions only. Compression and file format are covered by serving images in next-gen formats. The two fixes stack. Lighthouse also has an opposite check in its best practices category that flags images served with too low a resolution, so shrinking files below the displayed size is not a solution either.

Oversized images waste bytes and slow down LCP

Every surplus pixel is transfer time on a mobile connection. The bigger effect is on Largest Contentful Paint. Hero images, product photos and article header images are frequent LCP elements, and when that image is oversized, the extra download time goes straight into the LCP time.

Setting the right dimensions in the markup also helps Cumulative Layout Shift, because the browser can reserve the space before the file arrives. Both LCP and CLS are Core Web Vitals, with good thresholds of 2.5 s and 0.1 at the 75th percentile of real visits.

How to properly size images

1. Find the oversized images

The PageSpeed Insights report lists each flagged image with its URL, file size and estimated savings. Start with the largest savings, since one oversized hero image usually outweighs a dozen small icons. In Chrome DevTools, hover the image URL in the Elements panel to see the rendered size next to the intrinsic size, or compare naturalWidth with clientWidth multiplied by devicePixelRatio in the console.

Test at a phone width and a desktop width. An image that fits on desktop can be oversized on mobile, where the same file is squeezed into a narrow column.

2. Serve responsive images with srcset and sizes

Instead of one file for every screen, offer several widths and let the browser choose:

<img
  src="/product-800.jpg"
  srcset="/product-400.jpg 400w,
          /product-800.jpg 800w,
          /product-1200.jpg 1200w,
          /product-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 400px"
  width="800" height="600"
  alt="Product photo">

• srcset lists the available files. The w descriptor is the real pixel width of each file, not a display size.
• sizes tells the browser how wide the image will be rendered at each viewport width. The browser reads it before layout, multiplies by the device pixel ratio and picks the smallest file that is still sharp enough.

The sizes value must match your CSS. If the image sits in a three-column grid on desktop, say so:

sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"

For images with a fixed display width, such as a logo or avatar, density descriptors are simpler: srcset="/logo.png 1x, /logo-2x.png 2x".

3. Use the picture element for art direction

When the image itself should change between breakpoints, for example a wide landscape crop on desktop and a tighter square crop on mobile, use <picture> with media queries. Each <source> can carry its own srcset and sizes:

<picture>
  <source media="(max-width: 600px)"
          srcset="/hero-square-600.jpg 600w, /hero-square-1200.jpg 1200w"
          sizes="100vw"
          width="600" height="600">
  <img src="/hero-wide-1600.jpg"
       srcset="/hero-wide-1200.jpg 1200w, /hero-wide-1600.jpg 1600w, /hero-wide-2400.jpg 2400w"
       sizes="100vw"
       width="1600" height="700"
       alt="Team at work in the office">
</picture>

4. Set width and height attributes

Always add width and height with the image's aspect ratio. Browsers use them to calculate the aspect ratio before the file loads and reserve the right amount of space, which prevents layout shifts. Keep the image responsive in CSS:

img { max-width: 100%; height: auto; }

If the attributes are not practical, an explicit aspect-ratio in CSS does the same job for the space reservation.

5. Generate the sizes automatically with an image CDN

Exporting four or five widths of every image by hand does not scale. Image CDNs and resizing services such as Cloudinary, imgix or Cloudflare's image resizing create the variants on the fly from a single original, controlled by the URL:

<img src="https://img.example.com/hero.jpg?w=800"
     srcset="https://img.example.com/hero.jpg?w=400 400w,
             https://img.example.com/hero.jpg?w=800 800w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="800" height="450" alt="Hero image">

The parameter names differ by provider. Most services also convert the format and compress in the same step.

Properly sized images in WordPress, Shopify and Next.js

WordPress

WordPress creates several sizes on upload (thumbnail, medium, medium_large, large and, since version 5.3, 1536px and 2048px variants) and outputs srcset and sizes automatically for images inserted through the editor or wp_get_attachment_image(). Problems usually come from themes or page builders that print the full-size URL directly, or from a sizes attribute that does not match the layout. Register sizes that fit your theme's columns with add_image_size(), and after changing sizes, regenerate existing images with the Regenerate Thumbnails plugin or wp media regenerate in WP-CLI.

Shopify

Shopify's CDN resizes images on request. In Liquid, pass a width to the image_url filter and let image_tag build the markup, including srcset, width and height:

{{ product.featured_image
   | image_url: width: 1200
   | image_tag: widths: '400, 800, 1200', sizes: '(max-width: 600px) 100vw, 50vw' }}

Older themes that hardcode full-size image URLs, often in slideshows, are the usual source of the warning.

Next.js

The next/image component resizes images through the built-in optimizer and generates srcset. Pass sizes whenever the image is not a fixed width. Without it, the component only generates 1x and 2x variants of the given width, and with fill it assumes the image spans the full viewport:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero image"
  width={1600}
  height={900}
  sizes="(max-width: 768px) 100vw, 50vw"
  priority
/>

The priority prop keeps the LCP image from being lazy-loaded. Next.js 16 replaces it with preload, so check the prop name for your version.

Common mistakes when sizing images

• sizes="100vw" on everything. It tells the browser that every image spans the full viewport, so a thumbnail in a four-column grid gets a file four times too wide. Write sizes per component, matching its real layout.
• Giant files scaled down with CSS. A 4000px camera original set to width: 100% in a narrow container looks fine and downloads the full file. CSS changes the displayed size, not the bytes.
• Lazy-loading the LCP image. loading="lazy" on the hero delays the most important image of the page. Load it eagerly and consider fetchpriority="high". The guide to deferring offscreen images covers which images should load lazily.
• Missing width and height. Responsive images still need dimensions, otherwise the page shifts when they load.
• Background images in CSS. background-image has no srcset. Use media queries or image-set() to serve smaller files, or switch important visuals to an <img> element.

How to verify properly sized images

Re-run Lighthouse or PageSpeed Insights on the same page. The list of flagged images and the estimated savings should shrink, and ideally the audit passes. In DevTools, check currentSrc on key images at different viewport widths to confirm the browser picks the file you expect.

PerfDelta tests several pages of your site on mobile and desktop and lists the Lighthouse opportunities with estimated savings and the affected image files. Because it also shows field data, you can follow whether LCP improves for real visitors once the change appears in the Chrome UX Report's 28-day window.

Frequently asked questions

What does "Properly size images" mean in PageSpeed Insights?

It means some images are served with far more pixels than the space they occupy on screen, taking the device pixel ratio into account. Lighthouse estimates how many bytes you would save by serving files that match the displayed size.

What is the difference between srcset and sizes?

srcset lists the image files you offer and their pixel widths. sizes tells the browser how wide the image will be displayed at each viewport width. The browser combines both with the device pixel ratio to pick the smallest file that still looks sharp.

How many image widths should I generate?

Three to five widths cover most layouts, for example from a phone-sized variant up to about twice the largest displayed width for high-density screens. More variants add little and make caching less efficient.

Does properly sizing images improve LCP?

Yes, when the LCP element is an image. A smaller file downloads and decodes faster, so the largest element appears sooner. Make sure the LCP image is not lazy-loaded, or the gain is lost.

Do I still need width and height attributes with srcset?

Yes. The attributes give the browser the aspect ratio before the file loads, so it can reserve space and avoid layout shifts. Combine them with height: auto in CSS to keep the image responsive.

How do I fix "Properly size images" in WordPress?

Use the image sizes WordPress generates and make sure your theme or page builder outputs the built-in srcset instead of full-size URLs. Register sizes that match your layout, then regenerate existing thumbnails with a plugin or WP-CLI.