Reserving image dimensions.

Dimension reservation means telling the browser, before a resource loads, how much space it will occupy — closing the most common source of layout shift in one step.

First on the list of layout shift causes are images without dimensions, and the fix is markedly cheaper than the others: writing width and height on the image. A one-line correction removes the bulk of the shift on most sites.

The reason it still gets skipped is historical: when responsive design spread, declaring fixed dimensions was thought to break responsiveness, and the attributes were dropped. That was partly true back then; today it is entirely wrong.

Modern browsers compute the ratio

Today’s browsers compute the aspect ratio from the width and height attributes and preserve that ratio in responsive layouts. Writing the attributes does not mean the image will display at a fixed size — only that its ratio is known.

In practice this happens: the image flexes at one hundred percent width, but its height is computed proportionally and the space is reserved in advance. When the resource arrives it settles into the reserved space and nothing shifts.

The values to write are the image’s REAL pixel dimensions — not the size it will display at. The ratio comes from those two numbers, and the displayed size is determined by the CSS.

With responsive images

When different files are served for different widths, a question arises: whose dimensions get written? The answer is that the files should carry the same aspect ratio — then whichever is written, the ratio comes out the same.

If the ratios differ — say a square crop on mobile and a wide one on desktop — the attributes are not enough and a ratio must be defined per breakpoint on the CSS side. That is the typical situation for images requiring art direction.

1. Derivatives with the same ratio — the width and height attributes suffice.
2. Crops with different ratios — a ratio definition per breakpoint is needed.
3. Content of unknown size — a minimum height is reserved for the worst case.
4. Embedded frames — the container gets a ratio; the attribute does not work.
5. Ad slots — a fixed-height container; if the ad never comes, a gap remains but nothing shifts.

The last item carries a trade-off that must be made consciously: reserving space leaves a blank area when the resource does not arrive. The choice is between a shift and a gap, and in nearly every case the gap is better — the user sees a gap and moves on; a shift they suffer.

The practice on this site

On this site the reservation discipline is built and measured per image type. The showcase crops have their dimensions reserved, and the verification suite measures on four separate routes that the image really loads, its format is modern and its size is reserved.

For the live preview videos, the reservation is done with a poster frame: before the video loads, an image of the same ratio holds its place. With the reduced motion preference on, the video never loads and the poster becomes permanent — the suite separately measures that the poster really loads in that state.

The measured result: the layout shift of this site and the three projects it manages is 0.001. Google’s good threshold is 0.1; the measured value is one percent of the threshold. Not an optimization achievement but the natural consequence of a rule set from the start.

Between a shift and a gap, the gap wins — the user sees a gap and moves on; a shift they suffer.

Reservation beyond images

The concept of dimension reservation is not limited to images; it applies to everything arriving late or sizing late. Ad slots, embedded social boxes, map components, video players and lists whose length depends on user data — all need reservation.

The method varies by type. For fixed-ratio content, a container can be given a ratio. For content of unknown height, a minimum height is reserved — if the resource never comes, a gap remains but nothing shifts.

1. Fixed ratio — the container gets a ratio; the content fits exactly when it arrives.
2. Unknown height — a minimum height is reserved; a value measured for the most common case.
3. Variable lists — skeleton screens; a placeholder of the same height until the content arrives.
4. Ad slots — a fixed-height container; staying empty beats shifting.
5. Notification bars — must not enter the flow; either reserve the space up front or keep it as an overlay on top.

The fifth item is one of the most destructive shift sources and the easiest to fix. A bar injected at the very top of the page pushes EVERYTHING below it down — the shift value comes out near maximal. The same bar sitting as an overlay on top shifts nothing.

The general principle: content arriving later must not change the flow of existing content. Either its place is reserved from the start, or it lives on a layer outside the flow. There is no third option — and when neither is chosen, the default behavior produces the shift.

A practical checklist

Turning this page into an audit step, here is what to check in dimension reservation. The list is kept short because long lists do not get walked; six items fit in one sitting.

1. Does every image carry width and height?
2. Are the values the real pixel dimensions — not the displayed size.
3. Do the responsive derivatives share the same ratio?
4. Do the embedded frames’ containers have a ratio?
5. Does late content enter the flow, or is it an overlay?
6. Was it tested on a slowed network — on a fast connection the shifts never show.

The last item is the precondition of measuring: on a fast machine everything arrives almost at once and the shifts never show. In a slowed environment they surface in order, and each source can be marked.

Choosing between a shift and a gap, the gap wins — the user sees the gap and suffers the shift.

A frame to close with: dimension reservation is one of the highest-return items in performance work. Its cost is nearly zero — writing two attributes in most cases — and in return the most common source of layout shift closes entirely. The only reason it gets skipped is habit: in responsive design’s early years removing the attributes was right, and the habit survived after browsers started computing the ratio. A habit with no validity left today.