HTML picture element

The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn’t support the <picture> element—the URL of the <img> element’s src attribute is selected. The selected image is then presented in the space occupied by the <img> element.

To decide which URL to load, the user agent examines each <source>’s srcset, media, and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.