HTML · справочник

Тег picture

picture позволяет браузеру выбрать подходящий файл изображения по формату или условию media. Внутри обязательно остаётся обычный img как запасной вариант.

Современный формат

Source перечисляются до img. Браузер берёт первый поддерживаемый тип, а если ни один не подходит — использует src у img.

<picture>
  <source srcset="photo.avif" type="image/avif">
  <source srcset="photo.webp" type="image/webp">
  <img src="photo.jpg" alt="Рабочее место разработчика">
</picture>

Разные кадры для экранов

Атрибут media позволяет показать более узкий кадр на телефоне. Это художественное кадрирование, а не просто уменьшение одного файла.

<picture>
  <source media="(max-width: 600px)" srcset="portrait-mobile.jpg">
  <img src="portrait-wide.jpg" alt="Преподаватель у доски">
</picture>

Частые ошибки

Picture без img.
Alt добавлен source вместо img.
Одинаково тяжёлые файлы для всех экранов.
Подмена изображения с другим смыслом.

Практика

Подготовь AVIF, WebP и JPG одной фотографии. Затем добавь отдельный мобильный кадр через media и проверь выбор файла в инструментах браузера.

Связанные темы

img · Изображения · object-fit