Тег <picture>

Тег <picture> (укр. — “картина”, “адаптивне зображення”) в HTML використовується для створення адаптивних (респонсивних) зображень. Дає змогу браузеру самостійно вибирати найбільш відповідну версію зображення в залежності від:

  • ширини екрана (через медіа-запити),
  • щільності пікселів дисплея (retina / non-retina),
  • формату, який підтримує браузер (наприклад, WebP, AVIF, JPEG тощо).

Дозволяє гнучко оптимізувати завантаження зображень для різних пристроїв.

Атрибути

Специфічні атрибути

Тег <picture> сам по собі не має специфічних атрибутів — уся конфігурація виконується через вкладені теги:

  • <source> — задає альтернативні джерела зображень.
  • <img> — резервне зображення за замовчуванням, яке буде завантажено, якщо жоден <source> не підходить.

Глобальні атрибути

Тег <picture> підтримує всі глобальні атрибути HTML:

  • id — унікальний ідентифікатор. Наприклад:
<picture id="hero-image">...</picture>
  • class — для CSS-стилізації. Наприклад:
<picture class="responsive-image">...</picture>
  • style — для інлайн-стилів. Наприклад:
<picture style="display: block;">...</picture>

Приклад використання

<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Приклад використання picture</title>
    <style>
        img {
            width: 100%;
            height: auto;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<h2>Адаптивне зображення:</h2>

<picture>
    <source srcset="image-large.avif" type="image/avif" media="(min-width: 1200px)">
    <source srcset="image-medium.webp" type="image/webp" media="(min-width: 600px)">
    <source srcset="image-small.jpg" type="image/jpeg">
    <img src="fallback.jpg" alt="Опис зображення">
</picture>

</body>
</html>

Додаткові моменти

  • Тег <picture> потрібен для складніших сценаріїв, ніж простий srcset в <img>. Він дозволяє комбінувати умови типу формату, ширини, роздільної здатності.
  • Завжди повинен містити всередині обов’язковий резервний тег <img>, який також задає alt.
  • Дає змогу значно оптимізувати завантаження ресурсів на мобільних пристроях.
  • Широко використовується в сучасній адаптивній верстці, лендингах, блогах, e-commerce тощо.
  • Підтримується усіма сучасними браузерами.