HTML тег <picture>

Для того, чтобы выводить разные изображение в зависимости от устройства (ширины экрана), также можно использовать тег <picture>.

<picture> — это обертка для элементов <source> и <img>, которая дает браузеру возможность выбрать источник.

<img> тег тут очень важен - без него <picture> не может существовать. Это элемент для которого будут применены данные из <source> после того как будет выбран подходящий <source>.

Сам по себе тег <picture> – это более развитый аналог тега <img> и обладает интуитивно понятным синтаксисом.

<picture> выигрывает у атрибутов sizes и srcset в <img> в двух случаях:

1) Когда используются разные форматы изображений.

<picture> позволяет использовать новые форматы (webp, avif) и не бояться за поддержку старых браузеров. Для этого можно указать MIME-тип картинки в 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>

• Тип изображение указанного в <source> должен соответствовать типу указанному в type.
• Не используйте атрибут media, если вам не нужно художественное оформление.
• Также можно использовать srcset и sizes.

Нескольких размеров (под ретину):

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

Аттрибут media

В теге source также можно использвать аттрибут media, чтобы указать ширину экрана для которой должен использоваться указанный source:

<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

Позволяет указать размер картинки (width) для указанного размера экрана:

<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) При Художественном оформлении.

Например у нас есть картинка, которая нуждается в художественном оформлении:

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

Исправим её с помощью <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>

Комментарии к коду:

• media атрибут элемента <source> содержит медиа-условие, используя которое бразуер выбирает какую картинку нужно использовать. Из примера выше, если ширина экрана (viewport) 800 или меньше, то будет выведено изображение первого элемента <source>, если больше — второго.

• srcset атрибут содержит URL картинки. Здесь также можно указать группу предписаний и добавить атрибут sizes, однако используя <picture> тег это вряд ли будет продуктивно.

• <img src="" alt=""> с атрибутами src и alt перед закрывающем тегом </picture>, должен быть обязательно указан, иначе изображения не появятся! Этот тег нужен для роботов и когда браузер не может выбрать изображение по указанным условиям.

Поддержка бразуерами

Тег <picture> для SEO и почему о нем нужно забыть

С помощью этого тега легко и безболезненно переходить на внедрение альтернативных графических форматов. Достаточно просто перечислить внутри этого тега наши картинки (jpeg, png, webp) и браузер сам примет решение, какое из них взять.

Если вы решите серьезно заниматься технической оптимизацией, то следует забыть про тег <picture>

Потому что, когда вы начнете формировать вывод с тегом <picture> то же самое, что через тег <img> – это даст минимум троекратное увеличение узлов в DOM-дереве на каждое изображение. Верхняя граница вашего DOM-дерева оптимально должна быть в среднем 1500 узлов. У многих эта граница превышена. А каждый узел DOM-дерева – это расход памяти и замедление скриптов.