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

Атрибуты

accesskey Горячая клавиша для активации
class CSS-классы для стилизации
contenteditable Разрешает редактирование
data-* Пользовательские данные
dir Направление текста
hidden Скрывает элемент
id Уникальный идентификатор
lang Язык содержимого
spellcheck Проверка орфографии
style Инлайновые стили
tabindex Порядок перехода
title Всплывающая подсказка
translate Определяет возможность перевода

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