The picture tag

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 <source> and <img> elements that gives a browser the ability to choose a source.

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

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

<picture> wins over the sizes and srcset attributes in <img> in two cases:

1. When different image formats are used.

<picture> allows you to use new formats (webp, avif) and not be afraid of support for older browsers. To do this, you can specify the MIME type of the image in the type attribute, the browser will «take» the first supported type.

The selection/analysis of a suitable option goes from top to bottom (the first suitable option will be used):

<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.
We do not use the media attribute if we do not need art direction.
You can also use srcset and sizes.

Multiple sizes (for retina):

<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, 
      my-photo@2x.png 2x"
    >
</picture>

Media

You can also use the media attribute in the source tag 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>

Sizes 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. In art work

Art work is when we use different images for different screen sizes.

Example: We have a landscape with a person in the center. On a large screen, such a picture looks good because we can easily see the person. And on a small screen it is better to show a cropped picture where the person is larger.

In other words: we adapt the image to the context and screen size so that it always looks its best.

Example of a picture that needs art direction:

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

Let’s fix it with <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 chooses which picture to use. From the example above, if the screen width (viewport) is 800 or less, then the image of the first <source> element is displayed; if more, the second.

The srcset attribute contains the URL of the picture. You can also specify a group of prescriptions here and add the sizes attribute, however, 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 according to the specified conditions.

You can also use srcset to show different images (art works), but using <picture> is more convenient.

Browser support

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

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

If we decide to seriously engage in technical optimization, then you should not abuse the <picture> tag. If we format the output using <picture> in the same way as using <img>, this will triple the number of nodes in the DOM tree for each image.

The optimal number of nodes in the DOM tree is no more than 1500. Many sites exceed this limit.

Each node of the DOM tree is an additional memory consumption and script slowdown.

Why do you need srcset and why CSS and JavaScript are not suitable?

When the page loads, the browser starts loading images before loading and interpreting CSS and JavaScript. This technique reduces page load time by an average of 20%. But it is not suitable for creating responsive images, for this the srcset attribute was created.

We cannot dynamically change the image URL after it has started loading.

Example: we cannot load the <img> element, then determine the screen width using JavaScript and dynamically change the URL to a smaller image. By this time, the original image is already loaded (or starting to load).

Link copied