Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

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

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

Категории контента Потоковый контент, фразовый контент, встроенный контент
Разрешённый контент  Ноль или более элементов <source>, затем один элемент <img>, при необходимости смешанный с элементами поддержки сценариев.
Пропуск тегов None, both the starting and ending tag are mandatory.
Разрешённые родители Любой элемент, который разрешает встроенный контент
Разрешённые ARIA roles Нет
DOM interface HTMLPictureElement

Атрибуты

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

Примеры

Эти примеры демонстрируют влияние различных атрибутов элемента <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>' в этой спецификации.
Живой стандарт Первоначальное определение

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

ВозможностьChromeEdgeFirefoxInternet ExplorerOperaSafari
Базовая поддержка3813

38

32 — 521

Нет259.1
ВозможностьAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Базовая поддержка3838 Да

38

32 — 521

259.3 Да

1. From version 32 until version 52 (exclusive): this feature is behind the dom.image.picture.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

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

Метки документа и участники

Внесли вклад в эту страницу: pytnik23, Nina_Amatova
Обновлялась последний раз: pytnik23,