Адаптивные изображения с srcset, sizes и picture

Что это такое

Руководство MDN по адаптивным изображениям разделяет две задачи. Переключение разрешения: одна и та же картинка должна передаваться меньшим файлом на небольшой экран или экран с низкой плотностью пикселей, а большим — на большой экран или экран с высокой плотностью. Управление композицией: для разных макетов нужна разная обрезка или композиция, например тесно кадрированный портрет на телефоне.

Для переключения разрешения используется srcset у img. С дескрипторами ширины каждый вариант указывает собственную ширину (hero-800.jpg 800w, hero-1600.jpg 1600w), а sizes сообщает браузеру ширину отведённого места: список медиаусловий с размером для каждого и итоговым значением по умолчанию ((max-width: 600px) 100vw, 50vw). Руководство отмечает, что проценты для ширины места недопустимы, а vw допустим; браузер использует первое подходящее условие и игнорирует остальные, поэтому порядок важен. Справочник img добавляет, что sizes предназначен только для случаев, когда srcset использует дескрипторы ширины. Для изображения фиксированного CSS-размера проще дескрипторы плотности (icon.png 1x, icon@2x.png 2x).

Для управления композицией применяется <picture> с дочерними <source media="…" srcset="…"> и запасным img. Тот же элемент с <source type="image/avif"> обеспечивает выбор запасного формата, поскольку браузер пропускает типы, которые не может декодировать.

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

Изображения часто составляют наибольшую долю объёма страницы. Телефон, скачивающий главное изображение для настольного экрана, расходует лишний трафик и задерживает отображение. MDN отмечает, что браузер начинает загрузку изображений до того, как основной парсер загрузит CSS и JavaScript страницы, поэтому выбор на уровне разметки позволяет раньше начать нужную загрузку.

Как применять

• При сборке создавайте от трёх до пяти вариантов ширины каждого изображения и перечисляйте все; выбор оставляйте браузеру. Включайте ширину в имя файла, чтобы srcset оставался читаемым.
• Формируйте sizes на основе реального CSS-макета; неверный sizes незаметно приводит к выбору чрезмерно больших файлов. Перепроверяйте его при изменении макета.
• Всегда задавайте атрибуты width и height либо aspect-ratio в CSS, чтобы место резервировалось ещё до получения изображения.
• Используйте loading="lazy" для изображений ниже первого экрана и decoding="async" там, где изображение не нужно для первой отрисовки; главное изображение на первом экране загружайте сразу.
• Сохраняйте осмысленный alt; адаптивная разметка не меняет правил доступности.

Подводные камни

srcset — подсказка: MDN указывает, что пользовательский агент выбирает любой доступный источник по своему усмотрению. Поэтому браузер может продолжить использовать более крупный вариант из кеша вместо загрузки меньшего. sizes вычисляется до того, как CSS изображения обязательно загружен, поэтому значения должны быть самодостаточными. Смешивать дескрипторы ширины и плотности в одном srcset недопустимо. Фоновым изображениям CSS вместо этого нужны image-set() или медиазапросы.