Properly Size Images: Stop Serving Oversized Images

What this means

Every image has two sizes: the file's real pixel dimensions and the display size the browser paints it at. When the file is much bigger than the display box, the browser downloads pixels it then throws away by scaling the image down.

A common example is a 2400-pixel-wide photo dropped into a 700-pixel content column. The visitor never sees the extra detail, but their device still pays to download and decode it, and on a phone the gap is wider still. This audit flags every image where that gap is large enough to matter.

Why it matters

Oversized images are one of the most common causes of slow pages, and the cost is paid in three places.

Wasted bytes. An image at four times the needed dimensions carries roughly sixteen times the pixel data, inflating page weight and lengthening download time on slow connections.

Slower LCP. The hero or lead image is very often the Largest Contentful Paint element. If the browser must pull down a huge file before painting it, your LCP score suffers directly, and LCP is a ranking-relevant Core Web Vital.

Mobile users hit hardest. Phones have smaller screens and slower networks, so an oversized image punishes the exact audience that makes up most of your traffic. Right-sizing is one of the highest-return performance fixes available.

How it gets flagged

Lighthouse compares each image's intrinsic (file) size against its rendered (displayed) size, adjusted for the test device's pixel ratio. If the potential saving from resizing is at least 4 KiB, the image is listed in the audit with its current size and the estimated bytes you could save.

The same audit surfaces inside PageSpeed Insights, Chrome DevTools, and crawl tools like Sitebulb that run Lighthouse under the hood. It names the exact image URLs, so start with the largest potential savings and any image above the fold.

How to fix it

1. Resize to the display dimensions. Find the largest box an image is shown in across your breakpoints, then export at roughly that width (double it to stay sharp on retina screens). A photo shown at 700 pixels rarely needs a source wider than about 1400 pixels.

2. Serve responsive images with srcset and sizes. Rather than ship one file to everyone, give the browser a menu of widths. The srcset attribute lists candidate files with width descriptors, and sizes tells the browser how wide the image will render so it can pick before layout.

<img
  src="photo-700.jpg"
  srcset="photo-400.jpg 400w,
          photo-700.jpg 700w,
          photo-1400.jpg 1400w"
  sizes="(max-width: 600px) 100vw, 700px"
  width="700"
  height="466"
  alt="Descriptive alt text"
  loading="lazy">

A phone reading 100vw grabs the 400-pixel file, while a desktop at the 700-pixel slot grabs the matching file instead of the largest. Always set width and height so the browser reserves space and avoids layout shift.

3. Lean on WordPress responsive images. Since version 4.4, WordPress generates several sub-sizes on upload and adds srcset and sizes automatically via functions like wp_calculate_image_srcset(). The fix is usually to upload a sensibly sized original (not a 5000-pixel camera export), use wp_get_attachment_image() or the block editor rather than hard-coded tags, and register your layout's sizes with add_image_size(). If a flagged image lacks srcset, it was almost always inserted as raw HTML or by a page builder that bypassed core.

4. Use an image CDN. Services that resize on the fly let you request a width in the URL and have the right dimensions returned and cached at the edge. This is the lowest-maintenance option for large libraries, and most also handle next-gen formats in the same pass. For the full workflow, see our complete image SEO guide.

False positives

Not every flagged image is a real problem. Retina screens legitimately want more pixels than the CSS box, so an image at twice its display width can be correct rather than wasteful. Lighthouse accounts for device pixel ratio, but aggressive 3x art can still nudge the report.

Images that scale up on very large monitors, or sit in fluid containers wider than your test viewport, may also appear despite being intentional. The 4 KiB floor means tiny savings sometimes surface with little real-world impact. Judge each entry by its estimated savings: chase the large, above-the-fold offenders and ignore a few kilobytes on a decorative thumbnail.