You start reading a paragraph, then a photograph loads above it and pushes the words down the screen. The image may have arrived quickly; the page still failed to leave a space for it.
A useful first fix is to tell the browser the image’s proportions before the file arrives. For ordinary images, supply accurate HTML width and height attributes and use responsive CSS. When designing a deliberate image box, CSS aspect-ratio can express its shape directly.
Give the box a proportion, not two conflicting sizes
For a three-to-two editorial image, a basic rule is:
.story-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}This example deliberately uses a fixed three-to-two box and crops mismatched source images to fit it. Check that the crop does not remove a face, label or other important detail. If preserving the complete photograph is essential, use its actual ratio instead of imposing this design.
MDN’s property reference explains that at least one size needs to be automatic for the preferred aspect ratio to affect sizing. Setting both width and height explicitly can make the ratio ineffective.
Test the unloaded state too
Use the browser’s network throttling tools and reload with the cache disabled. Watch the paragraph below the image. It should occupy the same position before and after the picture appears, unless another part of the page changes size.
A fallback such as aspect-ratio: auto 3 / 2 behaves differently on an image: the intrinsic ratio takes over when available. That is useful when intended, but a fallback that disagrees with the real picture can still change the layout.
Check a portrait image, a landscape image and a missing file at narrow and wide widths. Reserving space solves a geometry problem; it does not replace image compression, meaningful alternative text or a sensible loading strategy.