Справочник HTML & CSS

<picture>

Контейнер для нескольких вариантов картинки: браузер выбирает подходящий `<source>` или берёт `<img>`.

Синтаксис

<picture>
  <source srcset="…" media="…">
  <img src="…" alt="…">
</picture>

Примеры

Другой кадр на узком экране (измените ширину окна):

<picture>
  <source media="(max-width: 500px)" srcset="/media/photo-200x200.jpg">
  <img src="/media/photo-600x200.jpg" alt="Coffee beans" style="max-width: 100%;">
</picture>

Отдельная картинка для тёмной темы:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="/media/photo-200x200.jpg">
  <img src="/media/photo-400x250.jpg" alt="A cup of coffee" width="200">
</picture>

Примечания

<img> внутри обязателен и ставится последним: именно он показывает картинку, а <source> лишь подменяет её адрес. Стили и alt задают у <img>. Если нужно только разное разрешение одного кадра, хватит srcset у самого <img>.

См. также

<source> — Один из вариантов файла для `<video>`, `<audio>` или `<picture>`.
<img> — Картинка.
srcset — Несколько файлов одной картинки разного размера: браузер выбирает подходящий для экрана.

Вопросы и ответы по теме

В учебнике

Адаптивные изображения — Как картинки подстраиваются под экран — max-width, aspect-ratio, object-fit, атрибуты srcset и sizes, элемент picture.

Спасибо, что читаете!