Responsive Picture

<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800" class="responsive-img" alt="Summer sale banner">

<!-- Gold Standard: Art Direction and Performance with Accessibility -->
<picture class="accessible-picture">
  <!-- Desktop Version (Art Directed) -->
  <source
    media="(min-width: 1024px)"
    srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=1200"
  >
  <!-- Tablet/Mobile Version -->
  <source
    media="(min-width: 640px)"
    srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800"
  >
  <!-- Fallback Image (Where Alt Text Lives) -->
  <img
    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=640"
    alt="Hands typing on a laptop in a brightly lit modern office"
    loading="lazy"
  >
</picture>

// Gold Standard: Art Direction and Performance with Accessibility
picture.accessible-picture
  // Desktop Version (Art Directed)
  source(
    media="(min-width: 1024px)"
    srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=1200"
  )
  // Tablet/Mobile Version
  source(
    media="(min-width: 640px)"
    srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800"
  )
  // Fallback Image (Where Alt Text Lives)
  img(
    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=640"
    alt="Hands typing on a laptop in a brightly lit modern office"
    loading="lazy"
  )

const ResponsivePicture = ({ desktopSrc, mobileSrc, alt }) => (
  <picture>
    <source media="(min-width: 1024px)" srcSet={desktopSrc} />
    <img src={mobileSrc} alt={alt} loading="lazy" />
  </picture>
);

<template>
  <picture>
    <source media="(min-width: 1024px)" :srcset="desktopSrc">
    <img :src="mobileSrc" :alt="alt" loading="lazy">
  </picture>
</template>

<picture class="block w-full overflow-hidden rounded-xl shadow-lg">
  <source media="(min-width: 1024px)" srcset="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=1200">
  <img 
    src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&q=80&w=800" 
    alt="Developer workspace"
    class="w-full object-cover aspect-video"
  >
</picture>

The Standard

The <picture> element is used for responsive images and art direction. Crucially, the accessibility properties (like the alt text) reside on the inner <img> element. The browser chooses the source, but the img remains the semantic anchor.

WCAG Criteria

• 1.1.1 Non-text Content: The fallback img must provide the text alternative.
• 1.4.4 Resizing Text: Ensuring images scale correctly for different viewports without losing context.

❌ The Bad (Inaccessible)

What’s Wrong?

1. Performance Issues: Serving a 4K image to a mobile phone wastes bandwidth and slows down the experience.
2. Missing Alt Text: Not providing an alt attribute on the fallback img leaves the entire <picture> invisible to screen readers.
3. Improper Fallback: Using only source without a final img is invalid HTML and fails in older browsers.

✅ The Good (Accessibility-Ready Code)

Why This Works

1. Art Direction: Different crops or versions of an image can be served based on device width.
2. Centralized Accessibility: By placing the alt text on the inner img, we ensure that no matter which source is picked, the accessibility name remains consistent.
3. Native Optimization: Browsers handle the source selection natively, providing the fastest possible experience.

<picture>
  <source media="(min-width: 800px)" srcset="https://images.unsplash.com/photo-1522071823991-b1ae5e6a39c1?auto=format&fit=crop&q=80&w=1200">
  <img src="https://images.unsplash.com/photo-1522071823991-b1ae5e6a39c1?auto=format&fit=crop&q=80&w=400" alt="A team collaborating in a modern office">
</picture>

Technical Deep Dive

The Secret of <picture>

Assistive technologies don’t “see” the <picture> or <source> elements directly. They interact with the resulting <img> element. The browser’s job is simply to swap the src of that image based on your rules.

Use Case: Art Direction

Sometimes you want a wide landscape image for desktop but a zoomed-in square crop for mobile. The <picture> tag is perfect for this, as long as the alt text remains relevant to both crops.