Элемент picture (картина) позволяет отображать различные изображения для разных устройств или размеров экрана.
HTML элемент <picture>
HTML5 представляет элемент <picture> чтобы добавить больше гибкости при указании ресурсов изображения.
Элемент <picture> содержит ряд элементов <source>, каждый из них ссылается на разные источники изображений. Таким образом, браузер может выбрать изображение, которое лучше всего соответствует текущему виду и/или устройству.
Каждые элементы <source> имеют атрибуты, описывающие, когда их изображение является наиболее подходящим.
Показывать разные изображения на разных размерах экрана:
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
Попробуйте сами »
Примечание: Всегда указывайте элемент <img> как последний дочерний элемент <picture>. Элемент <img> используется браузерами, которые не поддерживают элемент <picture>, если ни один из них тег <source> совпадает.
Когда использовать элемент Picture?
Существует две основные цели для элемента <picture>:
1. Пропускная способность
Если у вас есть маленький экран или устройство, нет необходимости загружать большой файл изображения. Браузер будет использовать первый элемент <source> с соответствующими значениями атрибутов, и игнорировать любой из следующих элементов.
2. Поддержка форматов
Некоторые браузеры или устройства могут не поддерживать все форматы изображений. С помощью элемента <picture>, вы можете добавлять изображения всех форматов, и браузер будет использовать первый формат, который он распознает, и игнорировать любой из следующих.
Браузер будет использовать первый формат изображения, который он распознает:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Битлз" style="width:auto;">
</picture>
Попробуйте сами »
Примечание: Браузер будет использовать первый элемент <source> с соответствующими значениями атрибутов, и игнорировать любые следующие элементы <source>.
HTML Теги изображений
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет изображение-карта |
| <area> | Определяет активную область внутри изображении-карты |
| <picture> | Определяет контейнер для нескольких ресурсов изображений |
Для получения полного списка всех доступных HTML тегов посетите HTML Справочник тегов.