HTML-тег <picture>

Характеристики

• Тип: медиа, строчный, семантический
• Назначение: Предоставляет контейнер для указания нескольких источников изображений для разных условий отображения (адаптивные изображения).
• Родители: Любые HTML-теги, которые могут содержать фразовый контент.
• Потомки: Элементы <source> и один <img>.
• Глобальные атрибуты: все
• Атрибуты событий: все

Пример использования

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Описание изображения">
</picture>

Использование в JavaScript

// Получение элемента <picture>
const pictureElement = document.querySelector('picture');

// Добавление класса
pictureElement.classList.add('responsive-picture');

Рекомендации по обеспечению доступности (a11y)

• Всегда указывайте атрибут alt в элементе <img> внутри <picture>.
• Используйте <picture> для адаптивных изображений, чтобы улучшить производительность и доступность на разных устройствах.
• Отсутствие альтернативного текста в <img> внутри <picture> снижает доступность.
• Неправильное использование медиа-запросов может привести к загрузке неподходящих изображений.

Полезные ссылки