picture
Оновлено: 12.07.2022
<picture>
Являє собою контейнер для зберігання декількох елементів <source>, які підтримують елемент <img>. Це дозволяє вказувати різні зображення з урахуванням розміру екрана, щільності пікселів, формату зображення та інших параметрів. Ось кілька сфер застосування <picture> (від англ. picture — картинка, зображення):
- для екранів ретіна можна показувати зображення більшого розміру;
- виводити малюнки різного розміру для мобільних та настільних пристроїв;
- показувати зображення різних пропорцій, що враховують орієнтацію пристрою;
- виводити зображення у векторному форматі SVG, а для браузерів, що його не підтримують, показувати PNG.
Синтаксис
<picture>
<source>
<img>
</picture>
Всередині <picture>
сміститься нуль або декілька елементів <source>, які йдуть перед одним елементом <img>.
Закриваючий тег
Обов'язковий.
Атрибути
Для цього елемента доступні універсальні атрибути та події.
Приклад
У цьому прикладі використовується два зображення: одне у форматі SVG, а друге у звичному PNG. Браузери, які підтримують <picture>, відобразять картинку у векторному вигляді (рис. 1). Браузер IE покаже зображення у форматі PNG (рис. 2). Для наочності логотип дано розміром 128х128 пікселів та збільшено до 256х256.