<picture>

The <picture> serves as a container for zero or more <source> elements and one <img> element to provide versions of an image for different display device scenarios. The browser will consider each of the child <source> elements and select one corresponding to the best match found; if no matches are found among the <source> elements, the file specified by the <img> element's src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

To select the optimal image, the user agent examines each source's srcset, media, and type attributes to select a compatible image that best matches the current layout of the page, the characteristics of the display device, and so forth.

Common use cases for this are to provide a HiDPI (Retina) version of an image when using a high-DPI display, and to offer fallback image formats when a modern format is not supported by an older browser.

Attributes

This element includes only global attributes.

Examples

These examples demonstrate the effect different attributes of the <source> attribute have on the selection of the image to display when used inside a <picture>.

The media attribute

The media attribute lets you specify a media query that the user agent will evaluate to select a <source> element. If the media query evaluates to false, the <source> element is skipped.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

The type attribute

The type attribute lets you specify a MIME type for the resource(s) given in the <source> element's srcset attribute. If the user agent does not support the given type, the <source> element is skipped.

​<picture>
 <source srcset="mdn-logo.svg" type="image/svg+xml">
 <img src="mdn-logo.png" alt="MDN">
</picture>

Specifications

Browser compatibility

See also

• <img> element
• <source> element