HTML :: Тег <picture>
В HTML тег <picture> (от англ. picture – картинка, изображение) используется для обеспечения отображения оптимальной версии дочернего изображения для различных макетов страниц и размеров экранов устройств, а также для добавления форматов изображений, которые не поддерживаются всеми браузерами. Элемент <picture> является контейнером для одного элемента <img> и одного или более элементов <source>.
Чтобы выбрать наиболее подходящее для данной ситуации изображение, браузер анализирует атрибуты srcset, media, и type каждого элемента <source> и только затем выбирает изображение, которое наилучшим образом соответствует текущему макету страницы, характеристикам устройства отображения и т. д.
Синтаксис
<picture>
...
<source>
...
<img>
</picture>
Закрывающий тег: обязателен.
Атрибуты
Для элемента доступны универсальные атрибуты и соответствующие атрибуты-события.
Ссылки
Официальный сайт W3C: https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-picture-element
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/HTML/Element/picture
Примеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> </head> <body> <p> При изменении ширины окна браузер будет автоматически<br> подбирать подходящий размер изображения. </p> <picture> <source srcset="robot_2.png" media="(min-width: 1000px)"> <source srcset="robot_1.png" media="(min-width: 700px) and (max-width: 999px)"> <img src="robot.png" alt="Робот Вася"> </picture> </body> </html>
Пример №1