# All images have descriptive alt text, semantic filenames, and optimized weight

- **Pattern:** `ab-002479` (`seo-advanced.technical-seo.image-optimization`)
- **Severity:** low
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-002479
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-002479)

## Why it matters

Images with empty, missing, or filename-only alt text fail WCAG 2.2 SC 1.1.1 (Non-text Content), exposing the site to accessibility compliance risk and excluding screen reader users from content. Beyond accessibility, search engines use alt text as an image indexing signal — non-semantic filenames like `IMG_1234.jpg` provide no keyword relevance, and unoptimized images above 1 MB inflate page weight past the 5 MB threshold that degrades mobile performance scores. iso-25010:2011 performance-efficiency.resource-utilisation maps to the weight problem; wcag:2.2 1.1.1 maps to alt text. Both compound each other.

## Severity rationale

Low because image alt text and optimization failures are individually recoverable without code structure changes, and the SEO and accessibility impact accumulates gradually rather than causing acute failures.

## Remediation

Audit every `<Image>` and `<img>` in your components for alt text and file weight. Replace generic filenames at the source before they enter your asset pipeline. For Next.js projects, migrate raw `<img>` tags to `next/image` in `app/page.tsx` and component files:

```tsx
import Image from 'next/image'

// Before (fails alt + weight checks)
<img src="/images/IMG_1234.jpg" />

// After (passes both)
<Image
  src="/images/product-widget-hero.webp"
  alt="Widget Pro on a white desk — front view"
  width={800}
  height={600}
/>
```

For existing JPEG/PNG assets above 200KB, convert to WebP with `cwebp` or Squoosh before committing. Set a CI lint rule (e.g., `eslint-plugin-jsx-a11y` `alt-text` rule) to block missing alt text before merge.

## Detection

- **ID:** `image-optimization`
- **Severity:** `low`
- **What to look for:** Count all `<img>` and `<Image>` components across the codebase. For each, check: (1) alt text is present and descriptive (not empty, not just the filename), (2) filename is semantic (descriptive, not `IMG_1234.jpg` or `screenshot-2024.png`), (3) individual file weight under 1 MB per image. Enumerate the total image weight per page; target no more than 5 MB per page.
- **Pass criteria:** At least 90% of content images have descriptive alt text (minimum 3 words) and semantic filenames. Total page image weight under 5 MB per page. No single image exceeds 1 MB without being optimized. Report: "X of Y images have descriptive alt text; total page weight Z MB."
- **Fail criteria:** More than 10% of images lack alt text or have non-semantic filenames, or total page image weight exceeds 5 MB.
- **Skip (N/A) when:** No images present in any page component.
- **Detail on fail:** `"8 of 24 images lack alt text; 'banner.png' weighs 3.2 MB; total page image weight 6.8 MB (exceeds 5 MB limit)"`.
- **Remediation:** Optimize images with `next/image` in your page components (e.g., `app/page.tsx`), use next-gen formats (WebP/AVIF), add descriptive alt text, and compress.

## External references

- wcag 1.1.1
- iso-25010 performance-efficiency.resource-utilization

Taxons: accessibility, performance, findability

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