Images specify width and height to prevent layout shift

Images without explicit width and height attributes cause Cumulative Layout Shift (CLS), one of three Core Web Vitals metrics. When a browser downloads an image and discovers its dimensions, it reflows surrounding content — shifting text and buttons mid-read. Google's CWV assessment penalizes pages with CLS above 0.1, and users who experience unexpected layout shifts are significantly more likely to abandon a page. This is a direct business impact: form submissions and purchase buttons that shift away from the user's tap are missed conversions.

Add width and height attributes to every <img> tag, or use aspect-ratio CSS on the container. For dynamically sized images, aspect-ratio preserves space without hardcoding pixel values. The Next.js Image component requires these attributes and handles the reservation automatically.

// Before — layout shifts when image loads
<img src="/team.jpg" alt="Team" />

// After — space reserved before image loads
<img src="/team.jpg" alt="Team" width={800} height={600} />

// CSS aspect-ratio for fluid-width images
<div style={{ aspectRatio: '16/9', width: '100%' }}>
  <img src="/team.jpg" alt="Team" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
</div>

// Next.js Image (enforces dimensions)
import Image from 'next/image'
<Image src="/team.jpg" alt="Team" width={800} height={600} />