Элемент <picture>

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

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

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

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

Атрибуты

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

Примеры

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

Атрибут media

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

<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> опускается.

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

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

Спецификация Статус Комментарии
HTML Living Standard
Определение '<picture>' в этой спецификации.
Живой стандарт Первоначальное определение

Браузерная совместимость

BCD tables only load in the browser

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

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