Элемент <picture>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2016.

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

Чтобы выбрать оптимальное изображение, user agent анализирует атрибуты srcset, media, и type элемента <source> и выбирает совместимое изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.

Элемент <picture> часто используют для того, чтобы обеспечить HiDPI (Retina)-версию изображений для дисплеев с высоким разрешением, а также для добавления других форматов изображений, не поддерживаемых всеми браузерами.

Категории контента	Потоковый контент, фразовый контент, встроенный контент
Допустимый контент	Ноль или более элементов `<source>`, затем один элемент `<img>`, при необходимости смешанный с элементами поддержки сценариев.
Пропуск тегов	Нет, открывающий и закрывающий теги обязательны.
Допустимые родители	Любой элемент, который разрешает встроенный контент
Допустимые ARIA-роли	Нет
DOM-интерфейс	`HTMLPictureElement`

Атрибуты

Этот элемент содержит только универсальные атрибуты.

Примеры

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

Атрибут `media`

Атрибут media позволяет определить медиавыражение, которое веб-браузер будет анализировать для выбора элемента <source>. Если медиавыражение определяется как ложное (false), то элемент <source> пропускается.

html

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)" />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>

Атрибут `type`

Атрибут type позволяет вам обозначить MIME-тип данных, указанных в атрибуте srcset элемента <source>. Если браузер не поддерживает данный тип, то элемент <source> опускается.

html

<picture>
  <source srcset="mdn-logo.svg" type="image/svg+xml" />
  <img src="mdn-logo.png" alt="MDN" />
</picture>

Спецификации

Specification
HTML Standard # the-picture-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Элемент <img>
Элемент <source>
Позиционирование и определение размера изображения в рамках: object-position и object-fit