<picture>
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
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
| 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.