Responsive Images Alt

title: "Responsive Images and Alt Text — Accessible Picture Element" description: "Learn how to handle alt text for responsive images using the picture element and srcset, ensuring screen readers get consistent alt text across breakpoints." weight: 9 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, images]

Responsive images using picture and srcset need consistent alt text across all breakpoints, ensuring screen readers always get the same description regardless of which image loads.

## What You'll Learn

How to add alt text to responsive images using picture element and srcset.

## Why It Matters

Different image sources for different screen sizes should all have the same meaning. Alt text must be identical across breakpoints to avoid confusion.

## Real-World Use

A hero banner shows a wide image on desktop and a cropped version on mobile. Both serve the same purpose and use the same alt text.

## Picture Element

```html
<picture>
  <source srcset="hero-wide.webp" media="(min-width: 1024px)" type="image/webp">
  <source srcset="hero-wide.jpg" media="(min-width: 1024px)">
  <source srcset="hero-square.webp" media="(min-width: 600px)" type="image/webp">
  <source srcset="hero-square.jpg" media="(min-width: 600px)">
  <source srcset="hero-small.webp" type="image/webp">
  <img src="hero-small.jpg"
       alt="Banner: DodaTech announces new security features for enterprise customers">
</picture>

Srcset

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 33vw"
     alt="Mountain landscape at sunset with snow-capped peaks">

Common Mistakes

1. Different alt text for different breakpoints

All sources in a picture element should use the same alt, which goes on the img element.

2. Alt text on source elements

alt is not valid on source elements. Put alt only on the img element.

3. Sizes attribute missing

Without sizes, the browser loads the wrong image. Include sizes for correct selection.

4. No fallback img

The img element is required as the last child of picture. It provides the fallback.

5. WebP without JPEG fallback

Always provide a JPEG/PNG fallback for browsers that do not support WebP.

Practice Questions

1. Where does the alt text go in a picture element? On the img element, which is the last child of picture.

2. Do the different sources need different alt text? No. All sources represent the same content at different resolutions. Use the same alt text.

3. What is the purpose of the sizes attribute? sizes tells the browser how wide the image will be displayed, helping it choose the best source.

Challenge: Create a picture element with three breakpoints (wide, square, small). Add appropriate alt text.

FAQ

Mini Project

Create a responsive hero banner using picture with three breakpoints (wide desktop, tablet square, mobile vertical). Use descriptive alt text.

What's Next

Learn about Image Maps and how to make client-side image maps accessible.