<picture>

<picture> - контейнер зображеннь.

Синтаксис:

<picture>
<source srcset="URL">
<source srcset="URL">
<img src="URL">
</picture>

Параметри:

source - тег <source>.

img - тег <img>.

URL - URL адреса зображення.

Опис:

<picture> (анг. picture - картина, зображення) HTML тег який представляє контейнер зображень.

Всередині тегу <picture> вказується декілька тегів <source> і один тег <img>.

Браузер шукатиме перший елемент <source>, в якому медіа-запит відповідає поточним параметрам (ширина, висота і т.п.) області перегляду, а потім покаже правильне зображення (вказано в атрибуті srcset). Елемент <img> необхідний коли жоден з зображень не підходить.

Тег <picture> також має загальні атрибути і події.

HTML5 vs HTML4

Тег <picture> входить у специфікацію HTML5.

Приклад:

<picture>
<source media="(min-width:650px)" srcset="/dani/test.jpg">
<img src="/dani/test.png">
</picture>