The **`<picture>`** [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) element contains zero or more [`source`](source!) elements and one [`img`](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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#srcset), [`media`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#media), and [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source#type) attributes to select a compatible image that best matches the current layout and capabilities of the display device.

The `<img>` element serves two purposes:

1. It describes the size and other attributes of the image and its presentation.
2. It provides a fallback in case none of the offered `<source>` elements are able to provide a usable image.

Common use cases for `<picture>`:

- **Art direction.** Cropping or modifying images for different `media` conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
- **Offering alternative image formats**, for cases where certain formats are not supported.

  > **Note:** For example, newer formats like [AVIF](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#avif_image) or [WEBP](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types#webp_image) have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: [Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types).

- **Saving bandwidth and speeding page load times** by loading the most appropriate image for the viewer's display.

If providing higher-density versions of an image for high-DPI (Retina) display, use [`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset) on the `<img>` element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don't have to write explicit `media` conditions.