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.

The full picture

Width and height attributes on images allow browsers to reserve the correct amount of page space for each image before the actual image file finishes loading, preventing the genuinely disruptive visual shifting that occurs when page layout suddenly changes as images load in and claim space that wasn't previously reserved for them.

This layout shift represents a real, measurable user experience problem search engines specifically evaluate as part of their Core Web Vitals assessment, under the specific metric of Cumulative Layout Shift discussed elsewhere in this broader technical work — missing image dimensions represent one of the most common, directly addressable causes of this specific performance and user-experience issue.

Beyond the direct performance metric impact, this layout shifting creates genuinely frustrating user experience — visitors attempting to read content or click on interface elements can find their intended target suddenly displaced as images above load in and shift the page layout, a frustrating experience that properly declared image dimensions specifically prevent.

Implementing this systematically across your site's images, ensuring your content management system or development process consistently includes accurate width and height attributes for every image, addresses both the direct performance metric and the underlying user experience issue this metric is specifically designed to measure and encourage improvement on.

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. →