HTML <picture> тег

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

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

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

для обрезки и изменения изображений в зависимости от медиаусловий,
для предложения альтернативных форматов изображений, когда определённые форматы не поддерживаются.

Примечание: свойства object-position и object-fit применяются к резервному элементу <img> для управления его размером и выравниванием внутри контейнера.

Тег <picture> является новым в HTML5.

Синтаксис

Тег <picture> используется парами. Содержимое записывается между открывающим (<picture>) и закрывающим (</picture>) тегами.

HTML тег <picture>

<picture>
  <source media="...">
  <source media="...">
  <img src="...">
</picture>

Пример HTML тега `<picture>`:

HTML тег <picture>

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <picture>
      <source media="(min-width: 650px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_348_news_gallery_list.jpeg" />
      <source media="(min-width: 430px)" srcset="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" />
      <img src="https://api.w3docs.com/uploads/media/news_gallery/0001/01/thumb_366_news_gallery_list.jpeg" alt="Cityscape at sunset" style="width:auto;" />
    </picture>
    <p>Some information about pictures</p>
  </body>
</html>

Попробуйте сами »

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

Атрибут alt на резервном элементе <img> является обязательным: какое бы изображение браузер в итоге ни отобразил, используется именно этот текст alt. Всегда пишите описание реального содержимого изображения, а не заглушку вроде alt="img".

Две задачи <picture>

<picture> решает две разные проблемы, и выбор техники зависит от того, какой атрибут вы указываете в элементах <source>:

Художественное руководство — показывать другой кадр или композицию в зависимости от viewport. Широкий пейзажный снимок на рабочем столе, плотный портретный кадр на мобильном устройстве. Используйте атрибут media (CSS медиазапрос) для выбора подходящего изображения.
Согласование форматов — отдавать то же изображение в более современном и компактном формате, если браузер его поддерживает (AVIF или WebP), с возвратом к JPEG/PNG в остальных случаях. Используйте атрибут type (MIME-тип), чтобы браузер пропускал неподдерживаемые форматы.

Браузер проходит список <source> сверху вниз и использует первый элемент, который и подходит (по медиазапросу media, если он есть), и поддерживается (по типу type, если он есть). Порядок важен: сначала указывайте наиболее предпочтительный вариант.

Переключение форматов (AVIF, затем WebP, затем JPEG)

Это наиболее распространённое практическое применение <picture>. Современные браузеры, поддерживающие AVIF, загружают наименьший файл; более старые переходят к WebP, а всё остальное получает универсальный JPEG. Браузер загружает ровно одно изображение.

<picture>
  <source type="image/avif" srcset="photo.avif" />
  <source type="image/webp" srcset="photo.webp" />
  <img src="photo.jpg" alt="A red fox standing in fresh snow" />
</picture>

Поскольку элементы <source> содержат только атрибут type, всем браузерам предлагаются все три варианта — каждый просто выбирает первый поддерживаемый формат. Медиазапросы здесь не используются; речь идёт исключительно о формате файла.

Художественное руководство (разные кадры с помощью `media`)

Здесь цель — изменить какое изображение отображается, а не только его формат. На экранах шириной от 800px и более браузер получает широкий баннерный кадр; на более узких экранах — квадратный кадр, на котором объект хорошо читается на телефоне.

<picture>
  <source media="(min-width: 800px)" srcset="hero-wide.jpg" />
  <source media="(max-width: 799px)" srcset="hero-square.jpg" />
  <img src="hero-square.jpg" alt="Team celebrating a product launch" />
</picture>

Используйте media, когда содержимое изображения должно различаться в зависимости от контрольных точек.

Переключение разрешений с помощью `srcset` и `sizes`

Если вам нужно только одно и то же изображение в разных размерах в пикселях — без смены кадра или формата — <picture> обычно не нужен вовсе. Одиночный элемент <img> с srcset и sizes позволяет браузеру выбрать наилучшее разрешение для экрана, viewport и плотности пикселей устройства:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A red fox standing in fresh snow"
/>

Как это читать:

srcset перечисляет изображения-кандидаты, каждое с дескриптором ширины (400w означает, что файл имеет ширину 400px). Браузер знает реальную ширину каждого файла без его загрузки.
sizes сообщает браузеру, насколько широким будет отображаться изображение. Здесь это читается так: «при viewport менее 600px изображение занимает всю ширину (100vw); в остальных случаях — половину (50vw)». Браузер объединяет это с коэффициентом плотности пикселей, чтобы выбрать наиболее экономичный вариант из srcset.
src остаётся резервным вариантом для браузеров, не поддерживающих srcset.

srcset с дескрипторами ширины также работает внутри элемента <source>, поэтому можно сочетать переключение разрешений с художественным руководством или переключением форматов.

Когда действительно нужен `<picture>`?

Цель	Использование
То же изображение, пусть браузер выберет лучшее разрешение для экрана	`<img srcset>` + `sizes`
То же изображение в более компактном современном формате (AVIF/WebP) с резервным вариантом	`<picture>` + `type`
Разный кадр/композиция в зависимости от контрольной точки (художественное руководство)	`<picture>` + `media`

Практическое правило: используйте <picture> только тогда, когда нужно контролировать, какой именно файл загружает браузер (формат или кадр). Для простой задачи «отдать правильный размер» <img srcset> проще и достаточно.

Атрибуты

Эти атрибуты применяются к элементам <source> внутри <picture>:

Атрибут	Значение	Описание
media	media_query	Задаёт медиазапрос для соответствия размеру viewport.
srcset	URL	Задаёт URL изображения для использования в различных ситуациях.
sizes	length	Задаёт ширину изображения для различных размеров viewport.
type	MIME_type	Задаёт MIME-тип связанного ресурса (например, `image/webp`).
src	URL	Задаёт URL изображения. Используется как альтернатива `srcset`.

Каждый элемент <source> должен содержать атрибут srcset или src. Резервный элемент <img> использует атрибут src.

Тег <picture> поддерживает глобальные атрибуты.

Практика

Что делает HTML элемент picture?

Встраивает звуковое содержимое в документ.Определяет контейнер для нескольких исходных вариантов и одного резервного изображения, позволяя браузеру загрузить наиболее подходящее изображение для устройства, размера экрана или поддерживаемого формата.Работает только с векторной графикой, например SVG.Автоматически создаёт гиперссылку вокруг изображения.

Синтаксис

Пример HTML тега <picture>: