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

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.

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:

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.