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

Browser source selection, currentSrc, network requests, and accessibility-tree observations are recorded separately from specification claims. No dedicated fixture has been run yet, so pending items are not presented as verified.

Fixture candidate: picture-v1 should measure media order, type filtering, srcset and sizes, the fallback img, currentSrc across viewport/DPR changes, and network requests. Named and empty-alt accessibility-tree cases should separate the selected img from the picture container.

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
• OpenChrome, Firefox, and Safari comparisons for source selection, currentSrc, network requests, and viewport/DPR changes
• OpenIndividual WPT runs, format-specific decode/error/fallback behavior, and dynamic source insertion, movement, or attribute changes
• OpenComplete HTML-AAM mappings, accessibility trees, platform APIs, assistive technology, CORS, referrer policy, cache, and saved-data conditions

This is initial coverage. It records specification entry points and evidence sources, but does not claim that items marked Pending have been verified or that the entire picture element has been tested.

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.