HTML <picture> Tag

The <picture> tag is a container for multiple images sources. It will selects one of the images depending on the conditions.




A <picture> element with three image sources of different size. Resizing the browser will display the optimal image, effectively creating a responsive image.

Vincent Van Gogh
  <source media="(max-width: 520px)" srcset="/img/html/vangogh-sm.jpg">
  <source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
  <img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">

Note: The media attribute queries the browser to determine the best image source.

Using <picture>

The <picture> element specifies multiple image sources to display.

This element can display responsive images that adjust based on the device viewport.

The <picture> tag contains <source> and <img> tags.

The <img> element is displayed when the browser does not find a proper source.

More Examples

A <picture> with a <source> element that is specific for printing.
When printed this page will use a black and white image.

Vincent Van Gogh
  <source media="(max-width: 414px)" srcset="/img/html/vangogh-sm.jpg">
  <source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
  <source media="print" srcset="/img/html/vangogh-bw.jpg">
  <img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">

The printed output with a black-and-white image.

Code Explanation:

media - defines the browser and viewport condition for the image to be chosen.

srcset - the URL of the image to be displayed

Attributes for <picture>

The <picture> element itself has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    identifier Defines a unique identifier for the picture.
class    classnames Sets one or more CSS classes to be applied to the picture.
style    CSS-styles Sets the style for the picture.
data-*    value Defines additional data that can be used by JavaScript.
hidden    hidden Specifies whether the picture is hidden.
title    text Sets a title that displays as a tooltip.

For additional global attributes see our global attributes list.

Did you know?

Did you know?

Using <picture> versus <img>

These are some scenarios in which <picture> is appropriate:

For images that must be resized based on the device resolution.

To display images with optimal size and pixel density in each viewport size.

To prevent downloading large images on small devices, or viewing small images on large screens.

For art direction in which images are cropped, or display smaller versions, under certain conditions.

Tip: Most of these cases are advanced graphic scenarios where image quality matters.
In most other cases, regular <img> tags with CSS will suffice.

Browser support

Here is when <picture> support started for each browser:

38.0 Oct 2014
38.0 May 2015
13.0 Nov 2015
25.0 Oct 2014
9.1 Mar 2016

You may also like