When an image or embed loads without reserved space, everything below it moves. Set intrinsic dimensions or an aspect ratio so the browser can lay out the page before downloading the content.

<img src="article-photo.webp" width="1200" height="800" alt="A small boat in a harbor">
.video-frame {
  aspect-ratio: 16 / 9;
  background: #eee;
}

Reserve space for more than images

  • Set an aspect ratio for video and embedded media.
  • Use a stable minimum height for a region that will receive asynchronous content.
  • Avoid inserting a banner above the current reading position without reserving its space.

Measure the shift

Use browser performance tools to find layout shifts and confirm that the fix addresses the element that moves the page. A placeholder that changes size after loading can recreate the same problem.

Stable geometry helps people keep their place and supports a smoother page experience. The right dimensions should reflect the content rather than being guessed for a score.