HTML элемент <picture>

Тег <picture> дает веб-разработчикам больше гибкости при указании ресурсов изображений. Чаще всего элемент <picture> используется для художественного оформления адаптивного дизайна. Вместо одного изображения, масштабируемого вверх или вниз в зависимости от ширины области просмотра, можно создать несколько изображений, чтобы они лучше заполняли область просмотра браузера.

Элемент <picture> содержит два тега: один или несколько тегов <source> и один тег <img>. Браузер будет искать первый элемент <source>, где медиа-запрос соответствует текущей ширине области просмотра, а затем отобразит правильное изображение (указанное в атрибуте srcset). Элемент <img> требуется в качестве последнего дочернего элемента элемента <picture> в качестве запасного варианта, если ни один из исходных тегов не совпадает.

Элемент <picture> работает «аналогично» элементам <video> и <audio>. Вы настраиваете разные источники, и используется первый источник, который соответствует предпочтениям.

Синтаксис: