Responsive image checker

A srcset listing width candidates tells the browser which files exist. It does not tell it how wide the image will be rendered.

Without a sizes attribute the browser assumes the image occupies the full viewport width, because that is the specified default.

On a layout where the image occupies a third of the width, that assumption makes the browser select a file roughly three times wider than needed — on every screen size.

So the declaration is present, the audit tooling reports responsive images, and the bytes transferred are unchanged. This is the single most common way a responsive image implementation delivers no benefit.

The fix is the sizes attribute describing the rendered width at each breakpoint, which has to match the CSS rather than being guessed.

Descriptors that do not parse: a width descriptor written with the wrong unit, a density descriptor mixed with width descriptors in the same list, a missing separator between candidates.

A sizes attribute whose media conditions never match, which silently falls through to the last value in the list.

Candidate URLs that do not resolve, which means the browser falls back to the base source and the whole list accomplishes nothing.

A single candidate in a srcset, which is a declaration with no choice in it.

An invalid srcset is not a partial failure. Browsers that cannot parse it fall back to the base source, so the entire declaration is discarded.

The intrinsic dimensions of the file really served are read, and compared with the dimensions the image is displayed at.

A file substantially wider than its rendered box is oversized, and the excess is transferred on every load for no visible difference.

Density is taken into account: a file twice the rendered width is correct for a high-density screen, not oversized.

Width and height attributes on the element are checked separately, because their absence causes the layout to shift as each image arrives — a rendering defect rather than a weight one.

The aspect ratio of the declared dimensions is compared with the file's own, since a mismatch stretches the image or forces a reflow.

Images that vary with the layout carrying a srcset with several real candidates and a sizes attribute that matches the CSS.

Width and height attributes on every image, so the space is reserved before the file arrives.

No file substantially wider than the largest box it is rendered in, once density is accounted for.

Fixed-size images — an icon, a logo — carrying no srcset, which is correct rather than a gap.

`images.srcset` validates the srcset syntax and `images.sizes` the sizes attribute. `images.responsive` reports whether images adapt to the layout at all.

`images.dimensions` checks the width and height attributes, and `images.aspect_ratio` compares the declared ratio with the file's own.

`images.oversized` identifies files substantially larger than their rendered box. `images.inventory` is the list the rest is measured over, and `mobile.responsive_images` applies the same reading at mobile widths.

Rendered dimensions are established from the served markup and the layout information available to the scan. An image sized entirely by script after load may be measured against the wrong box.

Which candidate a browser selects depends on its viewport, its density and its own heuristics. What is validated is that the declaration gives it a real choice.

Images inserted after the page renders may not appear in the inventory, which is built from what the served HTML references.

A background image set in CSS is not an image element and carries no srcset. It is outside this check by construction.