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

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>' в этой спецификации.
Живой стандарт Первоначальное определение

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 38Edge Полная поддержка 13Firefox Полная поддержка 38
Полная поддержка 38
Нет поддержки 32 — 52
Отключено
Отключено 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.
IE Нет поддержки НетOpera Полная поддержка 25Safari Полная поддержка 9.1WebView Android Полная поддержка 38Chrome Android Полная поддержка 38Edge Mobile Полная поддержка ДаFirefox Android Полная поддержка 38
Полная поддержка 38
Нет поддержки 32 — 52
Отключено
Отключено 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.
Opera Android Полная поддержка 25Safari iOS Полная поддержка 9.3Samsung Internet Android Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Пользователь должен сам включить эту возможность.
Пользователь должен сам включить эту возможность.

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

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

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