Ретина без претензий Lighthouse: двойные картинки через media

Для чётких картинок на ретина-экранах обычно делают srcset с вариантами 1x и 2x. А потом Lighthouse пишет «Изображения больше, чем нужно»: браузер в проверке качает двойные файлы. Потому что телефон, который эмулирует PageSpeed, — не 1x и не 2x.

Это двадцать седьмая часть цикла «PageSpeed без мифов».

В чём подвох

Мобильная проверка эмулирует экран с плотностью 1,75. Браузер выбирает из srcset ближайший вариант не меньше нужного — то есть 2x. Затем Lighthouse сравнивает размер файла с размером контейнера и видит картинку почти вдвое больше, чем требуется, — претензия и «потенциальная экономия» в отчёте.

Обычный посетитель с телефоном плотностью 2–3 получает ровно то, что нужно. Страдает только оценка — но страдает.

Решение: разделить по плотности через media

Вместо одного srcset с 1x и 2x — два <source> с условием по плотности экрана:

<picture>
  <!-- плотные экраны (2 и выше) — двойной размер -->
  <source media="(min-resolution: 2dppx)" type="image/avif" srcset="/card-2x.avif">
  <source media="(min-resolution: 2dppx)" type="image/webp" srcset="/card-2x.webp">
  <!-- остальные, включая эмуляцию 1,75 — обычный -->
  <source type="image/avif" srcset="/card.avif">
  <source type="image/webp" srcset="/card.webp">
  <img src="/card.jpg" width="337" height="189" alt="…" loading="lazy">
</picture>

Устройства с плотностью 2 и выше получают чёткую двойную картинку, всё остальное — обычную. Для экранов 1,5–1,9 обычный размер чуть мягче идеала, но на практике разница незаметна.

Результат

На одной из страниц сайта после правки: претензий «изображения больше, чем нужно» — 8 → 0, вес картинок в проверке — 702 → 420 КБ.

Грабля: форматы из оригинала, а не из миниатюры

При внедрении всплыла ещё одна проблема — в самой сборке картинок. Avif и webp генерировались не из миниатюры нужного размера, а из оригинала: png-миниатюра была 351 px, а avif «к ней» — 520 px. Lighthouse справедливо считал avif огромным. Проверяйте не только разметку, но и реальные размеры файлов каждого формата.

А sizes в srcset не решает проблему?

sizes помогает выбрать вариант по ширине, но при плотности 1,75 браузер всё равно возьмёт следующий по размеру. Условие по плотности через media управляет выбором напрямую.