<picture> - HTML-елемент для зображень
HTML-елемент <picture> є контейнером, що використовується для визначення декількох джерел для елемента <img>, що дозволяє браузеру вибирати оптимальне зображення залежно від розміру екрана, щільності пікселів або формату зображення.
Елемент <picture> містить один або більше елементів <source> та один елемент <img>. Браузер перевіряє кожен <source> і вибирає перший, який відповідає поточним умовам (наприклад, розміру вікна або підтримці формату). Елемент <img> слугує як запасний варіант, якщо жоден з <source> не підходить, а також для браузерів, які не підтримують тег <picture>.
Елемент <img> завжди повинен бути останнім дочірнім елементом у <picture>.
Синтаксис
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Опис зображення">
</picture>Атрибути
Цей тег може мати глобальні атрибути.
Технічне резюме
| Категорія контенту | |
|---|---|
| Дозволений вміст | Нуль або більше елементів |
| Пропуск тегів | Жоден, початковий та кінцевий теги є обов’язковими. |
| Дозволені батьківські елементи | Будь-який елемент, що приймає вбудований контент. |
| Роль ARIA | Немає відповідної ролі. |
| DOM інтерфейс |
|
Підтримка браузерів
<picture> |
|---|