<picture>: Art Direction And Format Fallback

A <picture> element contains any number of <source> elements, each offering a conditional image alternative, followed by exactly one required <img> element as the final fallback. The browser evaluates each <source> in order, using the first one whose condition matches (or whose declared format it supports), and falls through to the <img> if none match.

Critically, <source> elements never render anything directly and carry no alt attribute — the <img> element is what actually displays, and is the sole carrier of the required accessible name, regardless of which <source> (if any) ultimately determined which image file loaded.

Each <source>'s media attribute functions like a CSS media query, letting different <source> elements offer genuinely different image files — not just different resolutions of the same crop, but actually different compositions — based on viewport width or other media features.

This directly addresses the art-direction problem from the Responsive Images lesson: a tightly-cropped portrait orientation photo optimized for a narrow mobile screen, versus a wide landscape crop that makes better use of available desktop space, both derived from the same source photo but composed differently for their respective contexts.

The same <source>-plus-fallback structure elegantly solves an entirely different problem: offering a smaller, modern image format (AVIF, WebP — both covered in the next two lessons) to browsers that support it, while transparently falling back to a universally-compatible JPEG or PNG for browsers that don't.

Here, the type attribute (rather than media) declares each <source>'s MIME type; the browser automatically skips any <source> whose declared type it can't decode, falling through to the next candidate or ultimately the <img> — requiring zero JavaScript or server-side browser detection to achieve reliable, automatic format negotiation.

Solving The Problem srcset Can't. Recall from the Responsive Images lesson: srcset solves resolution switching, but not art direction — genuinely different crops per layout. The <picture> element solves that distinct problem, and as a bonus, also solves image-format fallback, covered in the WebP and AVIF lessons that follow.

<picture> Wraps Multiple <source> Candidates Plus A Fallback <img>. A <picture> element contains one or more <source> elements, each with its own media condition and srcset, followed by a mandatory <img> as the final fallback — the <img> is what actually renders and carries the alt text; <source> elements only supply conditional alternatives.

picture Element Structure. Within a <picture> element, which element carries the required alt attribute?

• →Each <source> element individually
• →The single, mandatory <img> element
• →The <picture> wrapper itself

media Conditions Select Between Genuinely Different Crops. Each <source>'s media attribute works like a CSS media query, letting art direction change the actual image composition — not just its resolution — based on viewport, exactly the scenario srcset alone cannot address.

Art Direction With media. A design calls for a tightly-cropped portrait photo on mobile and a wide landscape crop on desktop, of the same underlying photo. Which HTML feature correctly implements this?

• →srcset alone, since it's the same underlying photo
• →<picture> with <source media="..."> for each distinct crop
• →CSS object-position alone, without any HTML changes

<picture> Also Enables Format Fallback. The same <source>-with-fallback structure elegantly solves a second, unrelated problem: offering a modern image format (WebP, AVIF) to supporting browsers while falling back to universally-supported JPEG/PNG for browsers that don't — using the type attribute instead of media.

Format Fallback With picture. Which <picture>/<source> attribute is used specifically for offering a modern image format with automatic fallback, as opposed to art direction?

• →media, the same attribute used for art direction
• →type, specifying the MIME type of the format
• →A dedicated format attribute

picture Element Mastered. You now understand the <picture> element's structure, how media-conditioned <source> elements solve genuine art-direction problems srcset alone can't, and how the same mechanism, via the type attribute, also enables modern image format fallback — setting up the WebP and AVIF lessons ahead.

Provide An Image Fallback. <picture> requires a fallback <img> for browsers that don't support any listed <source>.