The <picture> Element

Technical Summary

Definition / Categories

Item	Specification summary
Meaning	A container that supplies multiple sources and a resource-selection context for its child img
Categories	Flow content, phrasing content, embedded content, and palpable content
Context	Where embedded content is expected
Content model	Zero or more source elements, followed by one img; script-supporting elements are permitted in the specified positions
Tag omission	Neither the start nor end tag is omissible
Content attributes	Global attributes only; source conditions belong to child source elements, while the displayed image and alt belong to img
DOM interface	HTMLPictureElement

The source-selection boundary

The user agent considers source elements in document order and uses their media conditions and supported type values as selection inputs. A selected source contributes an image source set from srcset and, when relevant, sizes. Candidate selection then connects to the image-processing model, including the display slot, pixel density, and other environment conditions.

Attribute	Meaning inside picture
media	Uses a media query list as a condition on the current environment
type	States the image MIME type so an unsupported candidate can be skipped before fetching where applicable
srcset	Provides image candidates for the selected source
sizes	Provides the source size for a width-descriptor source set; whether it may be omitted depends on the conditions
src	Is not used on a source child of picture; put the fallback URL on img

A source element does not represent displayed content by itself. A source inside picture also has a different attribute meaning and resource-selection algorithm from a source inside audio or video.

Art direction and resolution switching

Goal	Typical model	Boundary to preserve
Different resolutions of the same composition	img srcset sizes	Do not replace candidate selection with unnecessary fixed media conditions
Different crop or composition	Multiple source media elements plus fallback img	Check that alt and surrounding text remain valid for every candidate
Different image formats	Multiple source type elements plus fallback img	A type hint is an input to selection; it is not the same as observed fetching, decoding, or rendering

Fallback and accessibility

picture is a selection context rather than the image presentation surface. Put the image meaning in alt on the fallback img. Observe named images, empty-alt images, and the accessibility tree of the selected image without treating the container's role as the image's role.

The presence of several source candidates does not by itself mean that several images are exposed to assistive technology. Browser trees, platform APIs, and assistive technology can differ and must be registered as separate observations.

DOM Interface

const picture = document.querySelector('picture');
const sources = picture.querySelectorAll('source');
const image = picture.querySelector('img');

picture instanceof HTMLPictureElement;
sources[0] instanceof HTMLSourceElement;
image.currentSrc;

HTMLPictureElement extends HTMLElement and does not expose a dedicated API that returns the selected source. The child img's currentSrc is an observation point after selection.

Fact / Evidence

Content model, source selection, attribute conditions, fallback, and accessibility are recorded separately so that normative claims are not presented as browser observations.

Evidence

1. HTML Standard: The picture element — meaning, categories, content model, HTMLPictureElement, and selection context
2. HTML Standard: The source element — media, type, srcset, sizes, and dimension attributes inside picture
3. HTML Standard: Images — source sets, candidate selection, display slots, pixel density, and art direction
4. HTML Accessibility API Mappings: picture — entry point for the mapping boundary between picture and its selected img
5. Web Platform Tests: embedded content — test directory for picture, source, img, and responsive-image behavior

Implementation Evidence

We ran picture-v1 in Chrome 155 on Windows 11 Pro build 26300. At a 390-pixel viewport and DPR 1.0, Chrome selected mobile-640.svg. At 1280 pixels and DPR 1.25, it selected desktop-960.svg. DPR tells the browser how many screen pixels it can use for each CSS pixel. In both runs, the selected file matched the media condition, and currentSrc (the URL of the image Chrome actually chose) pointed to that file. Chrome recorded no request for the source with an unsupported type or the source whose media condition did not match. When no source matched, the img provided the fallback image.

Observation fixture: build-config/yugien/research-results/picture-v1/. Each image file has a different color and name, so the selected image is easy to identify. These results come from one browser.

Source selection, fetching, decoding, post-selection accessibility trees, platform APIs, and assistive-technology output can depend on browser, OS, viewport, DPR, network, and image format. A single environment's observation is not registered as universal behavior.

Coverage / Open Issues

• ReviewedMeaning, categories, context, content model, tag omission, and HTMLPictureElement
• ReviewedThe specification boundary among source media, type, srcset, sizes, and the img fallback
• ReviewedResolution switching versus art direction, format selection, and the entry point for alt and accessibility mappings
• ObservedSource selection, currentSrc, fallback, and requests for unselected sources in two Chrome 155 viewport/DPR conditions
• ObservedAll three selected WPT files passed. The result remains partial because the served test revision is unknown
• ObservedHow named images, empty alt, and source candidates appear in the Chrome accessibility tree
• OpenFirefox and Safari, more viewport/DPR conditions, format-specific decode/error/fallback, and further dynamic source changes
• OpenMore WPT files and a pinned test revision; only the three listed files were run
• OpenWindows accessibility APIs, assistive technology such as Narrator or NVDA, and other browser accessibility trees

This measurement covers one Chrome environment and a selected set of WPT files. Other browsers and assistive technologies may behave differently.

Related surface

For a beginner-friendly explanation of image candidates, alt, and dimensions, see the Yugien picture element page. The single-image and srcset/sizes processing model is covered by the img element. See the source element for parent-specific attributes and candidate selection, and the video element to compare media-element selection. The element-specific scope of audio remains a separate topic.