All images have explicit width and height attributes

An <img> tag without width and height attributes is a direct cause of Cumulative Layout Shift — the browser allocates zero space for the image before it loads, then expands the layout when the dimensions are known, shifting every element below it. This is a mechanical cause of CLS as measured under ISO-25010 time-behaviour, not a heuristic concern. Marketing pages with feature grids, testimonial carousels, and team sections frequently contain dozens of images, each a potential layout shift event. A CLS score above 0.1 classifies the page as 'needs improvement' in Core Web Vitals, which reduces the page experience signal Google uses for search ranking decisions.

Add explicit width and height to every <img> tag — the browser uses the aspect ratio these provide to reserve the correct space before the image loads.

// Before — browser allocates no space, shifts layout on load
<img src="/feature-icon.svg" alt="Feature" />

// After — browser reserves the correct height before download
<img src="/feature-icon.svg" alt="Feature" width={48} height={48} />

// Next.js fill mode — parent must have an explicit height
<div style={{ position: 'relative', height: '400px', width: '100%' }}>
  <Image src="/photo.webp" alt="Photo" fill style={{ objectFit: 'cover' }} />
</div>

For responsive images where the display size varies, set width and height to the intrinsic image dimensions — CSS can scale the element down without causing CLS because the aspect ratio is already known.