How to build an accessible Image in React
role="img" with alt names the image; on error it shows a fallback image or neutral box so layout survives; the blur-up and zoom transitions are disabled under prefers-reduced-motion
When to use a Image
- Displaying a content image that should show a placeholder while loading and degrade gracefully on error
- Photos, thumbnails, or media that benefit from a blur-up placeholder or hover zoom
- Any image where a broken src should fall back rather than show a broken-image icon
When not to use it
- Identity thumbnails for a person or entity — use Avatar
- Purely decorative shapes or a fixed-ratio layout box with no load behavior — use AspectRatio
Accessibility
Role img, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Image src="/photo.jpg" /> with no alt
Prefer: <Image src="/photo.jpg" alt="Sunset over the bay" />
Without alt the image is invisible to assistive tech; pass an empty alt only for decorative images
Example
<Image src="/photo.jpg" alt="A photo" width={320} height={240} />