Width and height attributes on an img give the browser an intrinsic aspect ratio before image bytes arrive. CSS can still make the image fluid. The goal is to reserve the right shape, not to lock every image to its source pixel dimensions on screen.

The decision this guide supports

Prevent avoidable layout movement while keeping images responsive and correctly proportioned.

Repeatable method

1. Record the intrinsic ratio

Read the source pixel width and height. If art-directed crops have different ratios, treat each source carefully.

2. Add HTML dimensions

Use the intrinsic width and height on the img. Keep responsive CSS such as max-width:100% and height:auto.

<img src="chart-1200.webp" width="1200" height="800" alt="Transfer size by candidate width">

3. Test before the image completes

Throttle the network, disable cache, and reload while watching the space reserved around the image.

4. Measure shifts and causes

Use the Performance panel or a layout-shift overlay. Confirm the image, not a font, cookie banner, or injected component, is the source of movement.

Aspect-ratio reservation fixture

Use one illustrative 1200 × 800 chart, whose intrinsic ratio is 3:2, and build two otherwise identical pages. Variant A omits dimensions. Variant B includes width="1200" and height="800" while both use max-width:100%; height:auto. No CLS outcome is implied; the fixture exists to produce a result you can record.

Image-space reservation check

  1. Use the same image and CSS in two variants: one without intrinsic dimensions and one with correct width and height.
  2. Throttle the response and inspect the reserved box before the image finishes.
  3. In the Performance trace, identify each layout-shift entry and the node that moved.
  4. Compare the reserved ratio with the final rendered ratio at the tested breakpoint.
  5. Decision rule: the dimensions pass when the image reserves the correct proportion and is no longer the source of a layout-shift entry.

Disable cache, apply the same slow network profile, and reload each page at least three times. Capture the filmstrip and Layout Shifts track before comparing runs. Keep fonts, banners, and injected widgets unchanged so they do not confound the image test. For an art-directed picture, repeat the fixture at each crop breakpoint and verify that the reserved ratio matches the source selected there. Record medians separately rather than combining desktop and mobile traces.

What to record

Record source ratio, HTML dimensions, rendered dimensions, CSS rules, viewport, network throttle, cache state, layout-shift entries, and a screen recording when movement is hard to describe.

Do not turn a lab result into a universal rule

A result belongs to the source file, encoder, settings, browser, viewport, cache state, and date that produced it. Repeat the test on representative files before changing a production workflow.

Common mistakes

  • Removing dimensions because CSS is responsive
  • Using dimensions from a different crop
  • Giving a container a ratio that conflicts with the image
  • Blaming every visual movement on CLS without reading the trace

Verification checklist

Test at multiple responsive widths, rotate a mobile device, load with a cold cache, and inspect the computed aspect ratio. Confirm the image is not stretched and the reserved box matches the final render.

Primary references

Related lab notes

About this guide

We distinguish documented platform behavior from our workflow recommendations. See the testing methodology, editorial policy, and corrections log.