Lazy images without layout shift

2026-09-27

Adding loading="lazy" to images below the fold is the cheapest performance win there is. Done carelessly, it also makes the page jump: the text a reader is looking at moves down when an image above it finally arrives.

Reserve the space before the image loads

The browser can only reserve space if it knows the image's proportions before downloading it. Give every image its intrinsic size:

<img src="/img/rack.jpg" width="1600" height="900"
     alt="The rack after the rewiring" loading="lazy" decoding="async">

With a stylesheet rule such as img { max-width: 100%; height: auto; }, modern browsers derive an aspect-ratio of 1600 / 900 from the attributes and size the box correctly at any width. The attributes do not fix the displayed size; they only state the ratio.

Do not lazy-load what is visible on arrival

The first large image on the page is usually the Largest Contentful Paint element. Lazy-loading it delays exactly the metric you are trying to improve, because the browser waits for layout before deciding the image is in view. For that one image, do the opposite:

<img src="/img/hero.jpg" width="1600" height="900" alt="" fetchpriority="high">

Responsive images keep the same rule

With srcset the candidates may differ in resolution but should share one aspect ratio, so a single pair of width and height still describes all of them. If art direction needs different crops, use <picture> and give each <source> its own width and height.

Measuring it

In the browser's performance panel, enable the layout shift regions overlay and scroll the page on a throttled connection. Any blue flash over text means some element still arrives without reserved space; web fonts and late-injected banners are the usual suspects once images are fixed.