# Images served with explicit width and height to prevent layout shift

- **Pattern:** `ab-001029` (`directory-listing-schema.image-handling.image-dimensions`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001029
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001029)

## Why it matters

Images without explicit `width` and `height` attributes cause Cumulative Layout Shift (CLS) — the browser reserves no space until the image loads, then reflows all surrounding content. Google's Core Web Vitals threshold for CLS is 0.1; a directory listing page with 8 unsized images can easily exceed 0.5, dropping the page into the 'Poor' range and triggering a search ranking penalty. iso-25010:2011 performance-efficiency classifies layout stability as a resource utilization quality attribute. Beyond SEO, layout shift causes users to misclick adjacent links, a user-experience failure that increases bounce rate on listing pages where conversion depends on clicking through to the business.

## Severity rationale

Medium because CLS from missing dimensions measurably degrades Core Web Vitals scores and search ranking, but the failure does not expose data or create security risk.

## Remediation

Add explicit `width` and `height` to every listing image, or enforce a consistent aspect ratio via CSS `aspect-ratio`. For Next.js projects, use the `<Image>` component which enforces dimensions and handles responsive sizing.

```tsx
// Using Next.js Image for automatic CLS prevention
import Image from 'next/image';

<Image
  src={listing.imageUrl}
  alt={`${listing.name} storefront`}
  width={800}
  height={600}
  className="w-full h-auto"
/>
```

For plain `<img>` tags, at minimum add `style={{ aspectRatio: '4/3' }}` alongside `width` and `height`. Validate CLS improvement with Lighthouse or PageSpeed Insights after deploying the fix.

## Detection

- **ID:** `image-dimensions`
- **Severity:** `medium`
- **What to look for:** Count all listing images. For each, examine listing image elements. Check if `<img>` tags or Next.js `<Image>` components have width and height attributes or CSS aspect-ratio set.
- **Pass criteria:** All listing images have explicit width and height attributes (or CSS aspect-ratio) to prevent Cumulative Layout Shift — at least 1 standard aspect ratio enforced (1:1, 4:3, or 16:9) for listing thumbnails. Report: "X images found, all Y have consistent dimensions."
- **Fail criteria:** Images have no width/height attributes, causing layout to shift as images load.
- **Skip (N/A) when:** Listings don't use images.
- **Detail on fail:** Example: `"<img> tags lack width and height attributes"`
- **Remediation:** Add explicit width and height or use aspect-ratio CSS:

  ```tsx
  <img
    src={imageUrl}
    alt="listing image"
    width={800}
    height={600}
  />
  ```

## External references

- iso-25010 performance-efficiency.time-behaviour

Taxons: performance

HTML version: https://auditbuffet.com/patterns/ab-001029