Prevent Image Layout Shifts With Width and Height

<img src="layout-check.png" alt="...">

<img
  src="layout-check.png"
  width="640" height="360"
  alt="...">

Root cause

Responsive CSS controls the final rendered size, but it cannot reserve a missing intrinsic ratio before the resource is known. Without width and height attributes or another explicit ratio, the image begins at zero height and later expands, moving content that has already been laid out.

Accurate dimension attributes provide a ratio before the image source finishes loading. width: 100% and height: auto can still make the rendered image responsive; the attributes do not require a fixed 640-pixel display width.

Measurement support

Every browser run records the image height before and after source assignment plus the following content’s vertical movement. Chromium additionally records layout-shift performance entries that do not follow recent input. Firefox and WebKit results do not claim Layout Instability API support when that entry type is unavailable.

When this fix is not enough

The attributes must match the selected asset’s ratio. Art-directed <picture> sources with different crops may need source-specific dimensions. Lazy-loaded media, ads, embeds, fonts, and dynamically inserted notices can create separate shifts that require their own reserved space and measurement.

Regression condition

At 320 and 375 CSS pixels, the failing image must grow from zero height and move the following content by a positive number of pixels. The fixed image must reserve the same height before loading and leave the following content in place. Chromium must also report positive non-input layout shift for failing and zero for fixed.