HTML <picture> Tag

The <picture> element is a container for one or more <source> elements and one <img> element.

The <source> elements contains versions of an image for different display device scenarios. The browser considers each of the child <source> elements and loads the most appropriate image. If no matches are found, the browser displays the image specified by the <img> tag.

The <picture> tag allows to specify several images designed to more correctly fill the browser viewport instead of having one image being scaled based on the viewport width.

The <picture> tag is new in HTML 5.

Syntax

The <picture> tag comes in pairs, its content is written between opening (<picture>) and closing (</picture>) tags.

The <picture> tag contains one or more <source> elements and one <img> element, which is the last child element in the block.

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" alt="img_1" srcset="/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg">
      <source media="(min-width: 430px)" alt="img_2" srcset="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg">
      <img src="/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="img" style="width:auto;">
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Attributes

Attributes Value Description
media media_query Accepts any valid media query that would normally be defined in a CSS.
sizes Defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor.
New attribute in HTML5.
src URL Specifies the URL of the image.
srcset URL (required)Specifies the URL of the image to use in different situations.
New attribute in HTML5.
type video/ogg
video/mp4
video/webm
audio/ogg
audio/mpeg
Defines the MIME type.

The <picture> tag supports the Global Attributes.

Browser support

38+ 38+ 9.1+ 25+