Dofactory.com
Dofactory.com

HTML <picture> Tag

The <picture> tag is a container for multiple images sources.

The browser will select an image depending on certain conditions.

Example

#

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
<picture>
  <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">
</picture>

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


Using <picture>

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

Effectively, this creates responsive images that adjust to the device details.

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

The <img> element will display 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
<picture>
  <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">
</picture>

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:

Chrome
38.0 Oct 2014
Firefox
38.0 May 2015
IE/Edge
13.0 Nov 2015
Opera
25.0 Oct 2014
Safari
9.1 Mar 2016

You may also like


Last updated on Sep 30, 2023




Guides