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} />

• ID: performance-load.images.image-sizing

• Severity: high

• What to look for: Count all <img> tags and Image components across the project. For each, check whether width and height attributes are present, or whether the aspect-ratio CSS property is applied to the container. These prevent Cumulative Layout Shift (CLS) by reserving space before images load. Flag any width: 100% usage without an explicit container aspect-ratio.

• Pass criteria: At least 90% of images have explicit width and height attributes or use the aspect-ratio CSS property to reserve space. No more than 1 image lacks dimension attributes. Next.js Image component always has width/height (required). Report: "X of Y images specify explicit dimensions or aspect-ratio."

• Fail criteria: 2 or more images lack width/height attributes, allowing the browser to discover dimensions only after loading, causing layout shift. Report: "X of Y images lack dimension attributes."

• Skip (N/A) when: No images detected in the project (0 <img> tags, 0 Image component usages found).

• Detail on fail: "3 of 8 images lack width/height — Card.tsx, Hero.tsx, and Footer.tsx images have no dimension attributes" or "5 of 12 background images use width:100% without aspect-ratio, causing layout shift"

• Remediation: Always provide dimensions:

  // Before — layout shift risk
  <img src="/team.jpg" alt="Team" />
  
  // After — prevents layout shift
  <img src="/team.jpg" alt="Team" width={800} height={600} />
  
  // Next.js Image (width/height required)
  <Image src="/team.jpg" alt="Team" width={800} height={600} />
  
  // CSS aspect-ratio for dynamic images
  <img src="/image.jpg" style={{ aspectRatio: '16/9', width: '100%' }} />