The picture element: choosing formats and density

When the picture element is the right tool

The <picture> element exists for one job: serving different images to different contexts, where "context" means a device capability (whether a browser supports AVIF) or a layout condition (mobile crops a photo differently than desktop). It makes the format decision the browser's to make, with a graceful fallback baked in. The srcset article is the sibling that picks among *sizes of the same image; picture is for different images*.

Users reach for <picture> in three cases:

• Format negotiation: WebP/AVIF where a legacy browser needs JPEG. The format comparison article covers the trade-offs.
• Art direction: a tall portrait on a phone, a wide landscape on desktop, using the same semantic image.
• Derivations from one source: an image CDN or content system produces per-context renditions, and picture serves the right one.

Syntax anatomy

<picture>
  <source
    srcset="/img/hero.avif"
    type="image/avif"
    media="(min-width: 48rem)"
  />
  <source srcset="/img/hero.webp" type="image/webp" />
  <img
    src="/img/hero.jpg"
    alt="Worker taking a site live"
    width="1440"
    height="810"
  />
</picture>

The essential facts:

• The <img> is the fallback and the element that appears in the DOM; <source> elements never render. The <img> carries alt and width/height, which is what the image optimisation guide and the layout-shift article need for accessibility and CLS.
• The browser selects the first <source> whose type and media both match, as a lexical order from top to bottom. So put the newest format first and the JPEG <img> last.
• media is optional; use it only for art direction. Size-based switching inside a <source> uses srcset on the source with no media, exactly like an <img>.

Deep dive: the three rules that matter

1. type is checked first, media second. A source with type="image/avif" and no media is selected when the browser supports AVIF, silently skipping it otherwise. A media source without a type is selected when the media matches, regardless of the format the file is.
2. Keep media and size switching on separate sources. A source with both srcset and media is selected only when the media matches; if it is the only fallback and the media fails, nothing serves. Use one source per type for format negotiation and one (srcset, no media) for size candidates.
3. The <img>'s src is the loading order. The browser preloads the candidate the winning source declares. The img fetchpriority and loading still matter: loading="lazy" and a fetchpriority="high" on the hero behave exactly as on an <img> alone.

The no-React footnote

Server-rendered templates and static generators can use plain <picture> in the HTML directly. Client-side frameworks also support it through their JSX-to-HTML translations, but if you are emitting <picture> from a React component, remember the source and img are separate elements and the keys matter for hydration. For the rest of this resource, the pattern stays framework-agnostic: image optimisation runs the broader pipeline and format comparison weighs AVIF against WebP for the source files.