HTML tag <picture>

In order to display different images depending on the device (screen width), you can also use the <picture> tag.

<picture> is a wrapper for the <source> and <img> elements, which allows the browser to choose the source.

The <img> tag is very important here - without it, <picture> cannot exist. This is the element for which the data from <source> will be applied after a suitable <source> is selected.

The <picture> tag itself is a more advanced analogue of the <img> tag and has an intuitive syntax.

<picture> outperforms sizes and srcset attributes in <img> in two cases:

1) When using different image formats.

<picture> allows the use of new formats (webp, avif) without worrying about the support of old browsers. To do this, you can specify the image's MIME type in the type attribute; the browser will use the first supported type.

<picture>
	<source type="image/svg+xml" srcset="my-photo.svg">
	<source type="image/webp" srcset="my-photo.webp">
	<source srcset="my-photo.png">
	<img src="my-photo.png" alt="">
</picture>

• The image type specified in <source> must match the type specified in type.
• Do not use the media attribute if artistic styling is not needed.
• You can also use srcset and sizes.

Multiple sizes (for retina displays):

<picture>
	<source type="image/avif" srcset="my-photo.avif 1x, [email protected] 2x">
	<source type="image/webp" srcset="my-photo.webp 1x, [email protected] 2x">
	<img class="some-class" src="my-photo.png" alt="Icon" srcset="my-photo.png 1x, [email protected] 2x">
</picture>

The media attribute

In the source tag, you can also use the media attribute to specify the screen width for which the specified source should be used:

<picture>
  <source media="(max-width: 799px)" srcset="my-photo-portrait.jpg">
  <source media="(min-width: 800px)" srcset="my-photo.jpg">
  <img src="my-photo.jpg" alt="Some text">
</picture>

The sizes attribute

Allows you to specify the image size (width) for the specified screen size:

<picture>
	<source
		type="image/webp"
		srcset="my-photo-lg.webp 1200w,
				my-photo-md.webp 800w,
				my-photo-sm.webp 500w"
		sizes="(max-width: 800px) 90vw, (max-width: 500px) 70vw, 50vw"
	>

	<img
		srcset="my-photo-lg.jpg 1200w,
				my-photo-md.jpg 800w,
				my-photo-sm.jpg 500w"
		sizes="(max-width: 800px) 90vw, (max-width: 500px) 70vw, 50vw"
		src="my-photo-lg.jpg"
		width="280" height="460"
	>
</picture>

2) Artistic styling.

For example, we have an image that requires artistic styling:

<img src="my-photo.jpg" alt="">

Let's fix it using <picture>.

<picture>
	<source media="(max-width: 800px)" srcset="my-photo-portrait.jpg">
	<source media="(min-width: 800px)" srcset="my-photo.jpg">
	<img src="my-photo.jpg" alt="">
</picture>

Code comments:

• The media attribute of the <source> element contains a media condition, using which the browser selects which image to use. From the above example, if the viewport width is 800 or less, the image from the first <source> element will be displayed; if it is larger, the second one will be used.

• The srcset attribute contains the URL of the image. Here, you can also specify a set of descriptors and add the sizes attribute, but using the <picture> tag, this is unlikely to be productive.

• <img src="" alt=""> with the src and alt attributes before the closing </picture> tag must be specified, otherwise the images will not appear! This tag is needed for robots and when the browser cannot select an image based on the specified conditions.

Browser support

The <picture> tag for SEO and why you should forget about it

With this tag, it is easy and painless to transition to the implementation of alternative graphic formats. It is enough to simply list our images (jpeg, png, webp) inside this tag, and the browser will decide which one to use.

If you decide to seriously engage in technical optimization, then you should forget about the <picture> tag.

Because when you start rendering with the <picture> tag, the same as with the <img> tag, it will give a minimum threefold increase in nodes in the DOM tree for each image. The upper limit of your DOM tree should ideally be around 1500 nodes. For many, this limit is exceeded. And each node in the DOM tree is a memory expense and script slowdown.