Image Dimensions and Preventing Layout Shift

Image Dimensions and Preventing Layout Shift

One of the most common causes of a jumpy, unstable page is images that do not tell the browser how big they are. The browser leaves no space for them, then shoves the content down once they load — exactly the movement Cumulative Layout Shift penalises.

The fix is simple and reliable: always declare image dimensions.

A Small Change, Big Effect

Setting width and height on images is a tiny, one-line habit with an outsized payoff. By reserving the right space before the picture arrives, it stops the page jumping around and keeps your layout stable from the very first moment it appears.

The Effect on CLS

Declaring image dimensions is one of the most direct ways to improve your Cumulative Layout Shift score. When space is reserved in advance, the page simply does not move as images arrive.

  • Content stops jumping as images load.
  • Visitors no longer mis-click on moving links.
  • The page feels solid and trustworthy.
  • Your CLS score moves into the green band.

A Reliable Habit

Preventing layout shift from images is less about clever technique and more about consistency. When every image declares its size, the whole site stays stable by default rather than being fixed case by case.

  • Make declaring dimensions a standard part of adding any image.
  • Apply the same discipline to videos and embeds.
  • Bake it into templates so it happens automatically.
  • Check new pages for unexpected shift before they go live.

Why Dimensions Matter

When width and height are specified, the browser can reserve the correct space before the image arrives, so surrounding content stays exactly where it started.

How We Handle It

  1. Set explicit width and height on every image.
  2. Use modern aspect-ratio styling so images stay correct when they scale on different screens.
  3. Reserve space for embeds, ads and dynamic content too.

The Payoff

Pages feel solid and trustworthy, visitors stop mis-clicking, and your CLS score moves comfortably into the green.

If you need a hand with any of this, your Progressive Robot delivery team is ready to help. Raise a ticket from the Support area of your client portal or speak to your account manager and we will guide you through the next steps.

Did you find this article useful?