HTML <picture> Tag

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

The <source> element contains versions of an image for different display device scenarios. The <img> element describes the image’s size and other attributes. 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> element allows to specify several images designed to more correctly fill the browser viewport instead of having one image scaled based on the viewport width. It can be used for the following purposes:

  • to crop and modify images for different media conditions,
  • to offer alternative image formats when specific formats are not supported.

Use the object-position property to adapt the positioning of the image inside of the frame of the element, and the object-fit property to control how the image should be resized to fit inside the frame.

The <picture> tag is new in HTML5.

Syntax

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

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

Example of the HTML <picture> tag:

<!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+


Do you find this helpful?

Related articles