Add width and height attributes to images

1 hr Impact: medium Effort: medium ✓ Scan-verified — no manual checkbox

Images without explicit width and height attributes cause the page to jump around as they load — the browser doesn't know how much space to reserve until the image itself downloads, which is one of the most common causes of poor Cumulative Layout Shift (a real Core Web Vital ranking factor).

Without explicit width/height, the browser doesn't know how much space to reserve for an image until it finishes loading — causing the page to visibly jump as each image pops in. A direct, common cause of poor Cumulative Layout Shift.

How to fix it

1

Add explicit width/height to image tags

<img src="..." width="800" height="600"> — the browser reserves the correct space immediately, even before the image loads.
2

Use CSS aspect-ratio for responsive images

Combined with responsive CSS sizing, explicit width/height attributes still let the browser calculate the correct aspect ratio to reserve space with.
3

Check your CMS/page builder's output

Some platforms strip these attributes automatically — verify the actual rendered HTML includes them, not just your editor settings.

Common mistakes

This is frequently missed because it doesn't look broken on a fast connection where images load almost instantly — the layout shift becomes obvious specifically on slower connections, which is exactly what Google's real-world Core Web Vitals data captures.

How you'll know it's done

Images include explicit width/height attributes, and Cumulative Layout Shift scores confirm no image-caused layout jumping.

H.I.V.E. checks this automatically

Fix it, then re-scan — the check confirms itself. No manual checkbox, the scan is the truth.

Run this check in H.I.V.E. →

Add width and height attributes to images

How to fix it

Common mistakes

How you'll know it's done

Related checks

H.I.V.E. checks this automatically