Skip to content

Performance

How to fix cumulative layout shift from images

The browser cannot reserve space for an image whose size it does not know, so the page reflows as each one arrives. That is layout shift — the CLS metric — and it is why text jumps under someone's finger as they go to tap. Declaring the intrinsic width and height fixes it without changing how the image is styled.

What 13x checks

This is rule performance.image-dimensions in the public registry: Images declare their dimensions. It runs on every audit, against the pages we actually fetched, and its result is derived from the response rather than estimated.

Surface
Performance
Score weight
8 of the readiness score
Scope
Reported as skipped when the page renders only with JavaScript
Applies
To every site

Registry version 2026-07-30. Every rule is published, and the audit is deterministic — the same page produces the same finding every time.

The fix

The same text the audit hands you when this check fails on your own site.

of images have no dimensions. Add the intrinsic width and height:

html code
<img src="/hero.webp" width="1200" height="630" alt="…" />

CSS still controls the displayed size — these attributes only tell the browser the aspect ratio so it can reserve the right space before the file arrives. Pair them with:

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

Without them the page reflows as each image loads. That is the CLS metric, and it is why text jumps out from under someone's finger as they go to tap.

Framework-specific versions

Where the change differs enough to be worth writing out separately.

Does your site have this problem?

13x checks this and 112 others against your live URL in about 30 seconds. No account, and every finding comes with the fix for your framework.

No signup. Results in 30 seconds.

More performance checks