The picture element

Definition

picture groups alternative image sources for art direction or format selection. The required descendant img supplies the fallback, alternative text, dimensions, loading behavior, and accessible image node.

Minimal syntax

<picture>
  <source media="(min-width: 48rem)" srcset="/images/team-wide.webp" />
  <img
    src="/images/team-close.webp"
    width="800"
    height="800"
    alt="Workshop instructors reviewing a participant's page"
  />
</picture>

Source selection

The browser evaluates source elements in order and chooses the first matching media and supported type, then applies responsive candidate rules. It does not download every source. Inspect the selected current source rather than assuming which branch won.

Decisions and trade-offs

Use srcset on img when the composition stays the same and only resolution changes. Use picture when a narrow crop needs different content or when offering format alternatives. Keep every crop faithful to the same purpose and ensure none removes essential context.

Accessibility

Alternative text belongs on img, not source. It must describe the shared purpose across all selected variants. Dimensions should reserve the intended aspect ratio; art-directed crops with different ratios require layout testing to avoid shifts.

Common failures

• Putting alt on source instead of img.
• Using picture for simple density switching that srcset already solves.
• Cropping out the subject at one media condition.
• Omitting fallback src or intrinsic dimensions.
• Writing sizes values that contradict the rendered slot.

Verification checklist

Inspect the selected source at each content breakpoint, density, and supported format. Disable images, block modern formats, and confirm the fallback. Check alternative text with a screen reader, reserve space on a cold load, and test 320-pixel reflow, zoom, print, and slow network. Measure transferred bytes and layout shift rather than judging file names.

Maintenance note

Review every art-directed crop when the source image or layout changes. The fallback alternative must remain true for all variants, and each variant must retain the subject and evidence the page depends on.

Measure cold-load selection again after changing breakpoints because an old media condition can send the wrong crop or unnecessary bytes.