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>?
