picture

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

Браузери