W3cubDocs

/HTML

<picture>

The <picture> contains 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 child <source> element and chooses the best match among them; if no matches are found, 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 of the page, the characteristics of the display device, etc.

Common use cases for <picture>:

Art direction — cropping or modifying images for different media conditions
Offering different image formats when certain formats are not supported by all browsers

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 media conditions.

Content categories	Flow content, phrasing content, embedded content
Permitted content	Zero or more `<source>` elements, followed by one `<img>` element, optionally intermixed with script-supporting elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that allows embedded content.
Permitted ARIA roles	None
DOM interface	`HTMLPictureElement`

Attributes

This element includes only global attributes.

Usage notes

You can use the object-position property to adjust the positioning of the image within the element's frame, and the object-fit property to control how the image is resized to fit within the frame.

Note: Use these properties on the child <img> element, not the <picture> element.

Examples

These examples demonstrate how different attributes of the <source> element change the selection of the image inside <picture>.

The `media` attribute

The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each <source> element. If the media condition evaluates to false, its <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 specifies a MIME type for the resource URL(s) 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

Specification	Status	Comment
HTML Living Standard The definition of '<picture>' in that specification.	Living Standard	Initial definition

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic support	38	13	38 38 32 — 52 Disabled Disabled From version 32 until version 52 (exclusive): this feature is behind the `dom.image.picture.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	No	25	9.1

	Mobile
	Android webview	Chrome for Android	Edge Mobile	Firefox for Android	Opera for Android	iOS Safari	Samsung Internet
Basic support	38	38	Yes	38 38 32 — 52 Disabled Disabled From version 32 until version 52 (exclusive): this feature is behind the `dom.image.picture.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	25	9.3	Yes