<picture>: The Picture element
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
src attribute is selected. The selected image is then presented in the space occupied by the
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
To decide which URL to load, the user agent examines each
type attributes to select a compatible image that best matches the current layout and capabilities of the display device.
<img> element serves two purposes:
- It describes the size and other attributes of the image and its presentation.
- It provides a fallback in case none of the offered
<source>elements are able to provide a usable image.
Common use cases for
- Art direction. Cropping or modifying images for different
mediaconditions (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.
- 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 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
|Content categories||Flow content, phrasing content, embedded content|
|Permitted content||Zero or more
|Tag omission||None, both the starting and ending tag are mandatory.|
|Permitted parents||Any element that allows embedded content.|
|Implicit ARIA role||No corresponding role|
|Permitted ARIA roles||No
This element includes only global attributes.
Note: Use these properties on the child
<img> element, not the
These examples demonstrate how different attributes of the
<source> element change the selection of the image inside
media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each
<source>'s media condition evaluates to
false, the browser skips it and evaluates the next element inside
<picture> <source srcset="mdn-logo-wide.png" media="(min-width: 600px)"> <img src="mdn-logo-narrow.png" alt="MDN"> </picture>
srcset attribute is used to offer list of possible images based on size.
It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either...
- a width descriptor, followed by a
- a pixel density descriptor, followed by an
2x) to serve a high-res image for high-DPI screens.
<picture> <source srcset="logo-768.png 768w, logo-768-1.5x.png 1.5x"> <source srcset="logo-480.png, logo-480-2x.png 2x"> <img src="logo-320.png" alt="logo"> </picture>
<picture> <source srcset="logo.webp" type="image/webp"> <img src="logo.png" alt="logo"> </picture>
|HTML Living Standard
The definition of '<picture>' in that specification.
|Living Standard||Initial definition|
BCD tables only load in the browser