Images without width and height

In the responsive-design era, `width` and `height` attributes were removed from HTML because CSS controlled size and the fixed values conflicted with fluid layouts.

Browsers then changed: since 2019 they compute an aspect ratio from the `width` and `height` attributes and apply it as a default, so the attributes reserve correctly proportioned space while CSS still controls the actual displayed size.

So the modern pattern is both: the attributes carry the intrinsic dimensions for the aspect ratio, and CSS carries `max-width: 100%; height: auto` so the image stays responsive.

The values do not need to match the rendered size. They need to be the image's own proportions, because it is the ratio that reserves the box.

Cumulative Layout Shift measures how much visible content moves unexpectedly during a page's lifetime. Google's threshold for a good score is 0.1 or less, and images without dimensions are among the most common causes of exceeding it.

The human cost is worse than the metric. A reader starts a sentence, an image above it loads, and the sentence moves; a user aims for a button and something inserts itself above it, so the tap lands on the wrong thing.

It is most damaging on slow connections, where the gap between layout and image arrival is longest — which is the same audience least able to absorb a mistaken tap.

And it compounds: a page with twenty undimensioned images shifts twenty times, each shift moving everything below it.

Ads and embeds injected into the flow with no reserved container. These are frequently the largest single contributor on a content site.

Web fonts swapping from a fallback with different metrics, which reflows text rather than moving blocks.

Content inserted above the fold after load: a cookie banner, a notification bar, a personalised greeting.

Iframes without dimensions, which behave exactly like images in this respect.

So fixing the images is necessary and frequently not sufficient; the same reservation principle applies to every element that arrives late.

In the console: `[...document.images].filter(i => !i.hasAttribute('width') || !i.hasAttribute('height'))` lists the images with no reservation.

The browser's performance panel records layout shifts and highlights the elements that moved, which identifies contributors the attribute sweep misses — ads, embeds, late content.

Throttle the network to a slow connection and reload while watching the page. Shifts that are invisible on a fast connection are obvious on a slow one, and the slow one is the real user.

Field data in Search Console's Core Web Vitals report shows CLS as real visitors experienced it, which is the measurement that counts.

Add `width` and `height` to every `<img>`, using the image's intrinsic dimensions, and keep `max-width: 100%; height: auto` in CSS so the layout stays fluid.

For images whose dimensions vary, set `aspect-ratio` in CSS on the container so the box is reserved regardless of the file.

Reserve space for ads and embeds with a container of a known aspect ratio or a minimum height, even if the slot sometimes goes unfilled.

Load fonts with `font-display: swap` and match the fallback's metrics with `size-adjust` so the swap does not reflow text.

Insert late content below the fold, or reserve its space from the start. A cookie banner pushing the page down is a layout shift like any other.

`images.aspect_ratio` reports images whose declared dimensions are absent or inconsistent with the file's own proportions, which is what determines whether the reserved box is the right shape.

`images.dimensions` reports the declared and intrinsic sizes per image, with the page each appears on.

`performance.core_web_vitals` covers the measured outcome, so the cause and the effect appear in the same report rather than in two.

A declared ratio that disagrees with the file is worth separating from an absent one: the first reserves a box of the wrong shape, which shifts the layout twice.