Connection failed. Please try again.

Skip to content
SEO Tools
Help and documentation
Speed Medium impact Easy 5–15 min

Image dimensions (width/height)

Without image dimensions, the layout jumps (CLS).

What it is

When an <img> has no width and height specified, the browser doesn't know how much space the image will take until it loads — and once it arrives, the content "jumps". This is measured by the CLS metric (Cumulative Layout Shift).

Why it matters

Layout jumping is frustrating (the user clicks something other than intended) and Google penalizes it via CLS in Core Web Vitals.

How to do it

  1. 1Specify width and height on all <img> elements (the browser computes the aspect ratio from them).
  2. 2Alternatively, reserve space via aspect-ratio in CSS.
  3. 3The same applies to embeds and ads — reserve space for them.

Example

Wrong
<img src="photo.webp" alt="...">
Correct
<img src="photo.webp" alt="..." width="800" height="600">

Conclusion

Adding image dimensions is a five-minute task with a direct impact on CLS — one of the Core Web Vitals. Combine it with lazy loading and modern formats. Reserve space for embeds and ads too, so nothing jumps.

Related topics