Responsive Images Can Still Shift Your Layout: Reserve the Space First

An image can be responsive and still make the page jump. max-width: 100%; height: auto keeps a large image inside a narrow container, but it does not tell the browser how tall the image will be before the file arrives. If text moves after the image loads, the user may lose their place or tap the wrong control.

The first fix is usually ordinary HTML. Give the image its intrinsic dimensions and let CSS scale it:

<img
  src="service-team-1200.jpg"
  width="1200"
  height="675"
  alt="Two team members reviewing a website layout on a laptop"
>

article img {
  max-width: 100%;
  height: auto;
}

The width and height attributes establish a 16:9 ratio, so the browser can reserve the right shape before the image downloads. CSS can still make it fit the available width. Use the real dimensions or at least the real ratio; a fabricated ratio can still cause a shift when the actual file appears. MDN explains the browser's intrinsic aspect-ratio behaviour and the layout-shift problem.

Make responsive variants keep the same ratio

If the 600-pixel and 1200-pixel files are merely different sizes of the same crop, srcset can help the browser choose a suitable file without changing the reserved shape:

<img
  src="service-team-1200.jpg"
  srcset="service-team-600.jpg 600w, service-team-1200.jpg 1200w"
  sizes="(max-width: 700px) 100vw, 700px"
  width="1200"
  height="675"
  alt="Two team members reviewing a website layout on a laptop"
>

The sizes value must describe the rendered width, not simply copy the file sizes. Test it against the actual layout. If a mobile crop changes the image's aspect ratio, do not assume one pair of dimensions describes both crops. Give the art-directed source its own dimensions or reserve an appropriate aspect ratio in the relevant layout, then test the swap. MDN's responsive images guide distinguishes resolution switching from art direction.

Lazy-load selectively

For an image below the first screen, native loading="lazy" can defer the download until it approaches the viewport. Keep the dimensions even there:

<img
  src="project-detail.jpg"
  width="960"
  height="640"
  loading="lazy"
  alt="Close view of the project navigation design"
>

Do not apply lazy loading to every image by habit. An image that is already needed in the initial viewport should usually load promptly; delaying the page's main visual can worsen the experience. MDN notes that lazy-loaded images can appear after the load event, and explicitly recommends dimensions for lazy-loaded images. Check real page behaviour rather than relying on an attribute checklist alone.

Keep alternative text tied to the image's purpose

Dimensions solve layout stability, not accessibility. The alt value should communicate the image's function or relevant content in context. A decorative flourish can use an empty alt=""; a screenshot that teaches a step needs a description of the information the reader should take from it. Avoid repeating the heading or stuffing search terms. If the image contains essential words, make those words available in nearby HTML as well.

Before shipping, review the page at narrow and wide widths, throttle the network, and watch the space above and below each image while it loads. Check the actual files selected by srcset, the mobile crop, the alt text, and whether a visible button moves. The goal is a stable reading and interaction path, not a green score divorced from the page.

For teams building service pages where images, readability and enquiry paths all matter, Design Den Solutions' website development service provides the relevant context.

Generated with AI and checked against the linked MDN documentation. The matching conceptual cover illustration was generated with AI; the supplied Design Den Solutions logo was directly composited unchanged. The examples are illustrative, not measurements from a client site.