pictureelement

The picture element is an HTML feature that provides a flexible container for multiple image sources. It enables responsive imagery and art direction by allowing different files to be chosen based on media conditions and image formats. Inside a picture element, there are one or more source elements and a single img element used as a fallback.

How it works: Each source element can specify attributes such as srcset, media, and type. The browser evaluates the source elements in order and selects the first one whose media query and type match the current context. If no source matches, the browser uses the img element’s src as a fallback. The srcset and sizes attributes on source and img enable the browser to pick an appropriately sized image for the device.

Usage: The typical pattern places one or more source elements inside picture, followed by an img element that provides alt text and a default image. This structure supports art direction (different crops or formats for different conditions) and bandwidth optimization (serving smaller files on small screens or when a high-efficiency format is available). Example: a picture element with a WebP source for modern browsers and a JPEG fallback, plus an img with alt text.

Accessibility and semantics: The img element must include alt text to describe the image for assistive technologies. The picture element itself carries no presentation semantics beyond grouping the sources.

Compatibility: Modern browsers widely support the picture element. Legacy browsers may require polyfills or fall back to using the img element alone. See also srcset, sizes, and source.