HTML <picture> Tag

❮ Prev Next ❯

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>

Try it Yourself »

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.