Art Direction (<picture>)

The <picture> element solves a different problem than srcset. Where srcset swaps the same image at different resolutions ("resolution switching"), <picture> swaps different images entirely depending on the viewport — a technique called art direction.

Think of a hero photo that shows a wide landscape crop on desktop, but a tightly cropped portrait-oriented version on mobile so the subject isn't tiny. That is a job for <picture>, not srcset.

Basic Structure

HTML

<picture>
  <source media="(max-width: 600px)" srcset="hero-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="hero-tablet.jpg">
  <img src="hero-desktop.jpg" alt="Team celebrating a product launch">
</picture>

Note

The <img> at the end is required — it is both the fallback for browsers that don't support <picture> and the element that actually renders. All accessibility attributes (alt, dimensions) belong on that <img>, not on the <source> tags.

How the Browser Chooses a <source>

The browser evaluates each <source> in document order.
It picks the FIRST <source> whose media (or type) condition matches — not the "best" one, the first match.
If none of the <source> elements match, it falls back to the <img>.

Warning

Order matters. Because the browser stops at the first match, put your most specific conditions first (smallest breakpoints) and the most general one last, ending with the plain <img> as the ultimate fallback.

The media Attribute on <source>

media accepts any standard CSS media query — not just max-width. You can combine conditions, target orientation, or react to device pixel ratio.

HTML

<picture>
  <source media="(orientation: portrait) and (max-width: 500px)" srcset="hero-tall.jpg">
  <source media="(min-width: 1600px)" srcset="hero-ultrawide.jpg">
  <img src="hero-default.jpg" alt="Conference keynote stage">
</picture>

Format Fallback: WebP with JPEG Fallback

<picture> also handles a second, unrelated use case: serving a modern image format to browsers that support it, while falling back to a universally-supported format for the rest. Here you use the type attribute instead of (or alongside) media.

HTML

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Mountain lake at sunrise">
</picture>

Format	Typical savings vs JPEG	Browser support
AVIF	~50% smaller, best compression	Modern Chrome, Firefox, Safari 16+
WebP	~25–35% smaller	All major browsers since ~2020
JPEG	Baseline	Universal — always keep as final fallback

Tip

You can combine both use cases in one <picture>: multiple <source> entries with both type and media for a fully art-directed, format-optimized image set. The browser filters by type support first, then by matching media, in source order.

Combining srcset Inside <picture>

Each <source> can itself carry a full srcset/sizes pair, so a single breakpoint can still offer multiple resolution candidates for that crop.

HTML

<picture>
  <source
    media="(max-width: 600px)"
    srcset="hero-mobile-480w.jpg 480w, hero-mobile-960w.jpg 960w"
    sizes="100vw"
  >
  <source
    media="(min-width: 601px)"
    srcset="hero-desktop-1200w.jpg 1200w, hero-desktop-2400w.jpg 2400w"
    sizes="1200px"
  >
  <img src="hero-desktop-1200w.jpg" alt="Product lineup on a table" width="1200" height="675">
</picture>

<picture> vs srcset: When to Use Which

Goal	Use
Same image, different resolutions (bandwidth savings)	`<img srcset sizes>` alone
Different crop/composition per breakpoint (art direction)	`<picture>` with `media` on `<source>`
Modern format with fallback (AVIF/WebP → JPEG)	`<picture>` with `type` on `<source>`
Both art direction AND format fallback	`<picture>` with both `media` and `type`, combined with `srcset` per source

Key Takeaways

<picture> is for art direction (different images) and format fallback — srcset alone is for resolution switching (same image, different sizes).
The mandatory trailing <img> provides the fallback source, alt text, and dimensions.
The browser picks the FIRST matching <source> in document order — order your conditions from most specific to least.
Use media for breakpoint/orientation-based art direction, type for format fallback (AVIF/WebP/JPEG).
Each <source> can carry its own srcset/sizes for resolution switching within that breakpoint.