HTML элемент <picture>
HTML элемент <picture> позволяет отображать разные изображения для разных устройств или размеров экрана.
HTML элемент <picture>
HTML элемент <picture> предоставляет веб-разработчикам большую гибкость в определении графических ресурсов.
Элемент <picture> содержит один или несколько элементов <source> каждый из которых ссылается на разные изображения через атрибут srcset. Таким образом браузер может выбрать изображение, которое лучше всего соответствует текущему просмотру и/или устройству.
Каждый элемент <source> имеет атрибут media, который определяет, когда изображение является наиболее подходящим.
Пример
Отображайте различные изображения для различных размеров экрана:
<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>:
1. Пропускная способность
Если у вас небольшой экран или устройство, не нужно загружать большой файл изображения. Браузер будет использовать первый <source> элемент с соответствующими значениями атрибутов и игнорировать любой из следующих элементов.
2. Поддержка формата
Некоторые браузеры или устройства могут поддерживать не все форматы изображений. Используя элемент <picture> вы можете добавлять изображения всех форматов, и браузер будет использовать первый распознанный формат, а также игнорировать любой из следующих элементов.
Пример
Браузер будет использовать первый распознанный формат изображения:
<picture>
<source srcset="img_avatar.png">
<source srcset="img_girl.jpg">
<img src="img_beatles.gif"
alt="Beatles" style="width:auto;">
</picture>
Попробуйте сами »
Примечание: Браузер будет использовать первый элемент <source> из соответствующими значениями атрибутов и будет игнорировать любые следующие элементы <source>.
HTML Теги изображения
| Тег | Описание |
|---|---|
| <img> | Определяет изображение |
| <map> | Определяет карту изображения |
| <area> | Определяет область, на которую можно кликнуть внутри карты изображения |
| <picture> | Определяет контейнер для нескольких ресурсов изображений |
Для ознакомления с полным списком всех доступных HTML тегов посетите HTML Справочник тегов на нашем сайте W3Schools на русском.
Вопросы для самоконтроля
- Для чего необходим HTML-элемент
<picture>? - Сколько элементов
<source>может содержать в себе элемент<picture>? - С помощью какого атрибута элемент
<source>ссылается на разные изображения? - Что определяет атрибут
mediaкаждого элемента<source>?
