Тег picture

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>, должен быть обязательно указан, иначе изображения не появятся! Этот тег нужен для роботов и когда браузер не может выбрать изображение по указанным условиям.

Показывать разные изображение (художественное оформление) можно и через srcset, но через <picture> удобнее.

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

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

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

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

Оптимальное количество узлов в DOM-дереве — не более 1500. У многих сайтов этот лимит превышен.

Каждый узел DOM-дерева — это дополнительный расход памяти и замедление работы скриптов.

Зачем нужен srcset и почему CSS и JavaScript не подходят?

При загрузке страницы, браузер начинает загрузку изображений до загрузки и интерпретации CSS и JavaScript. Такая техника уменьшает время загрузки страницы, в среднем, на 20%. Но она не подходит для создания адаптивных изображений, для этого и был создан srcset атрибут.

Мы не можем динамически менять URL картинки после того, как она начала загружаться.

Пример: мы не можем загрузить элемент <img>, затем определить ширину экрана с помощью JavaScript и динамически изменить URL на картинку меньшего размера. К этому моменту исходное изображение уже будет загружено (или начнет загружаться).

Ссылка скопирована