Адаптивные изображения

Что это такое

Адаптивные изображения — собственные средства браузера, которые помогают отдать нужный файл под то место, которое изображение займёт: srcset и sizes отвечают за разрешение, <picture> — за смену кадра и современные форматы, атрибуты width/height резервируют место до прихода файла. Никакого скрипта здесь нет.

Почему это важно

Самая частая причина медленной страницы на телефоне — одно большое изображение, которое отдают всем устройствам подряд; и этого вполне можно избежать. Та же разметка решает, прыгнет ли вёрстка при загрузке изображения, скачает ли узкий экран широкую фотографию и выбросит большую её часть, получит ли браузер без поддержки новейшего формата сломанное изображение или рабочий запасной вариант. Работу, для которой раньше требовалась библиотека JavaScript, здесь выполняет один элемент. Знать его стоит как следует: цену ошибки платит каждый посетитель.

Ключевые идеи

`srcset` и `sizes` дают выбор браузеру

srcset перечисляет файлы-кандидаты с их ширинами, а sizes сообщает браузеру, какой ширины изображение будет отрисовано при каждой ширине окна, чтобы тот выбрал самый дешёвый вариант, который остаётся резким. Если sizes нет, браузер считает, что изображение занимает всю ширину окна, и часто берёт файл намного больше нужного.

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
  sizes="(min-width: 60rem) 33vw, 100vw"
  width="800" height="600"
  alt="A short description of the subject"
  loading="lazy"
  decoding="async"
/>

Всегда задавайте собственные размеры

Атрибуты width и height резервируют соотношение сторон до загрузки файла, поэтому текст под изображением не прыгает, когда оно появляется. Однако отображаемый размер CSS всё равно может переопределить.

`<picture>` меняет само изображение, а не только его размер

<picture> нужен там, где должна измениться композиция — широкий кадр на десктопе, высокий на телефоне, — или где вы предлагаете современный формат с запасным вариантом. Порядок источников важен: браузер берёт первый, который понимает.

<picture>
  <source type="image/avif" srcset="hero-1600.avif" media="(min-width: 60rem)" />
  <source type="image/webp" srcset="hero-1600.webp" media="(min-width: 60rem)" />
  <img src="hero-1600.jpg" width="1600" height="900" alt="…" />
</picture>

Отложенная загрузка ниже первого экрана, но не выше

loading="lazy" откладывает изображения за пределами экрана, пока они не приблизятся к области просмотра: так экономится трафик и улучшается показатель largest-contentful-paint. Если применить его к главному изображению первого экрана, задержится именно то изображение, которое этот показатель измеряет.

Отдавайте форматы, которые браузер умеет декодировать, в порядке предпочтения

AVIF и WebP обычно заметно меньше JPEG при похожем качестве. Предлагайте их как элементы <source> с запасным JPEG или PNG в <img>, и пусть запасной вариант будет действительно корректным, а не заглушкой.

Поручите изменение размера сборке

Генерация файлов-кандидатов вручную не переживёт и первого редизайна. Большинство инструментов сборки и сервисов изображений умеют выдавать набор из одного источника в нескольких ширинах и форматах — только так он и останется верным со временем.

Практика

Отдайте три ширины трём экранам

Возьмите одну фотографию и сделайте её шириной 400, 800 и 1600 пикселей. Напишите srcset и sizes для карточки, которая на телефоне занимает всю ширину, а на десктопе треть, и проверьте, какой файл браузер скачивает при двух размерах окна.

Готово, когда: узкое окно скачивает меньший файл, широкое — больший, а изображение никогда не растягивается сверх своей собственной ширины.

Исправьте сдвиг вёрстки

Найдите страницу, содержимое которой прыгает по мере прихода изображений. Добавьте width и height каждому изображению и снова зафиксируйте сдвиг вёрстки.

Готово, когда: сдвиг исчез из трассировки, а изображения по-прежнему отрисовываются в размере, который просит CSS.

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

srcset без sizes — браузер считает изображение полноширинным и скачивает файл намного больше нужного; исправить: опишите отображаемую ширину в vw и медиаусловиях.
Отложенная загрузка главного изображения — самый крупный видимый элемент задерживается, и страдает показатель загрузки; исправить: откладывайте загрузку только изображений ниже первого экрана.
Отсутствие width и height — содержимое прыгает, когда изображение приходит; исправить: всегда объявляйте собственные размеры.
Современный формат без рабочего запасного варианта — браузеры без поддержки показывают сломанное изображение; исправить: держите полноценный запасной <img> в последней позиции.
Изменение размера изображений вручную — набор устаревает при первом же изменении вёрстки; исправить: генерируйте кандидатов в сборке.

Что читать дальше

Язык гипертекстовой разметки (HTML) (02-frontend/03-html) — сам элемент, его атрибуты и текст alt, в котором и заключён смысл изображения.
Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — показатели, которые эти решения и двигают.
Адаптивный веб-дизайн (02-frontend/10-responsive-web-design) — контекст вёрстки, который и решает, какой ширины будет изображение.