Тег <picture>

Описание

Тег <picture> предоставляет разработчикам гибкость в определении ресурсов изображений. Это контейнер для нескольких элементов <source> и одного элемента <img>, позволяющий браузеру выбирать наиболее подходящее изображение в зависимости от условий (разрешение экрана, плотность пикселей, поддержка форматов).

Базовый синтаксис:
<picture> <source srcset="image-large.jpg" media="(min-width: 1200px)"> <source srcset="image-medium.jpg" media="(min-width: 768px)"> <img src="image-small.jpg" alt="Описание изображения"> </picture>

Ключевые особенности:

  • Поддержка адаптивного дизайна (разные изображения для разных экранов)
  • Возможность использовать современные форматы (WebP, AVIF)
  • Обязательное наличие <img> как fallback
  • Браузер выбирает первый подходящий <source>
  • Поддержка Retina-дисплеев через плотность пикселей (1x, 2x)
Пример с разными форматами изображений:
<picture> <source type="image/avif" srcset="image.avif"> <source type="image/webp" srcset="image.webp"> <img src="image.jpg" alt="Пример с разными форматами"> </picture>

Рекомендации по использованию:

  • Используйте для критически важных изображений
  • Оптимизируйте загрузку - указывайте сначала современные форматы
  • Всегда добавляйте атрибут alt для <img>
  • Для простых случаев достаточно srcset в <img>
  • Тестируйте на реальных устройствах

Тег <picture> является мощным инструментом для адаптивной загрузки изображений, позволяя значительно улучшить производительность и качество отображения графики на различных устройствах.

Атрибуты

class CSS-классы для стилизации
data-* Пользовательские данные
hidden Скрывает элемент
id Уникальный идентификатор
style Инлайновые стили
title Всплывающая подсказка

Поддержка браузерами
13.0 38.0 25.0 38.0 9.1