dotvitals

Images are much larger than the space they are shown in

MediumHigh confidenceperf.lab.images-oversized

What this check looks for

‹count› image(s) on this page are downloaded at a far higher resolution than they are displayed at. Serving them at the size they are actually shown would save an estimated ‹savings bytes›.

Why it matters

Visitors on mobile connections pay for every one of those bytes in time and often in money, and the browser then throws the extra pixels away. It is the most wasteful weight on a typical page.

When the check passes, your report says: “Images are served close to the size they are displayed at”.

What it costs your score

When this check fails it removes 8 points from your Performance score, before the status, confidence and repeat multipliers are applied. Performance carries a weight of 8 in the overall score.

It shares the performance.assets family ceiling of 25 points: however many findings that family produces, together they cannot remove more than that from Performance. One underlying problem showing up in several places is still one problem.

Severity
medium
Default confidence
high
Status when triggered
warn
Deduction
8 points
Family cap
performance.assets · 25
Category
Performance
Module
Perf lab
Fix owned by
user
In the ruleset since
2026.09

How the whole score is calculated

How to fix it

Serve each image at the size it is displayed, per device.

You are sending an estimated ‹savings bytes› of pixel data that the browser discards before the visitor ever sees it.

  1. Generate several widths of each image and offer them with srcset, using sizes to tell the browser how wide the image will be at each breakpoint.

  2. Cap the largest variant at roughly twice the maximum displayed CSS width — beyond 2× device pixel ratio the difference is not visible.

  3. Set width and height attributes on every image. It costs nothing and it also prevents the layout shift reported separately under Cumulative Layout Shift.

  4. If images are user-uploaded, put an image CDN or a build-time pipeline in front of them; hand-resizing does not survive contact with a content editor.

  5. Check background images too — a CSS background-image is not covered by srcset, and needs image-set() or a media query.

How to confirm it worked

  • Re-run this scan and confirm the oversized-image count has dropped.

  • In Chrome DevTools, Network → Img, compare each transferred size against the rendered size shown in the Elements panel.

A named slot like ‹domain› — and the braces left in the configuration below — is filled in with your own values when this rule appears on a report.

Remediation by platform

Page HTML
<img
	src="/photo-800.avif"
	srcset="/photo-400.avif 400w, /photo-800.avif 800w, /photo-1600.avif 1600w"
	sizes="(max-width: 700px) 100vw, 700px"
	width="800" height="450"
	alt="">
  • sizes is the part people omit, and without it the browser assumes the image is full viewport width and picks the largest candidate — which reproduces the problem you were fixing. State the real displayed width.

Technical detail

Oversized images: ‹count›, estimated saving **‹savings bytes›**.

‹detail›

This came from **one page load we performed**, not from your visitors. A lab measurement is reproducible and tells you exactly which bytes and which resources are responsible — which is why the numbers below are byte counts and resource lists rather than a score. What real visitors experience is in the field-data section, which is the evidence this report scores Core Web Vitals on.

We compare each image's intrinsic dimensions against the size it is rendered at, accounting for device pixel ratio, and report the difference as wasted bytes. A 3,000-pixel-wide photograph displayed in a 600-pixel column is carrying roughly 25 times the pixel data it needs.

The fix is not one resize: it is letting the browser choose. srcset with sizes gives it a set of widths and tells it how wide the image will be at each breakpoint, so a phone fetches the phone-sized file and a desktop fetches the desktop one. Doing this by hand once is fine; doing it for a content site means an image pipeline or an image CDN, which is why this is filed as an hour of work rather than minutes.

Standards and references

Test this on your domain

Run the check that produces this finding, on its own, against any domain.

Open the perf lab checker

Other perf lab checks