Изображения на сайте: WebP, AVIF, srcset и lazy loading

Изображения часто составляют большую часть веса страницы, и именно картинка первого экрана нередко определяет LCP. Четыре правила закрывают большинство проблем: подходящий формат, размер под экран через srcset, явные размеры для резервирования места и отложенная загрузка всего, что ниже первого экрана, — но никогда самой картинки первого экрана.

Статья для разработчиков и веб-мастеров. Ниже — какие форматы для чего, разметка с примерами, правила для первого экрана, имена файлов и alt, и чек-лист.

Форматы: что для чего

Google Поиск поддерживает в атрибуте src форматы BMP, GIF, JPEG, PNG, WebP, SVG и AVIF и советует, чтобы расширение файла совпадало с его реальным типом (рекомендации Google).

Не все системы управления сайтом принимают AVIF при загрузке. Если ваша не принимает, WebP — хороший компромисс.

Современный формат с запасным вариантом

Элемент picture позволяет предложить браузеру несколько форматов: он возьмёт первый, который умеет показывать, а img с src останется запасным вариантом.

<picture>
  <source type="image/avif" srcset="/img/hall-1200.avif">
  <source type="image/webp" srcset="/img/hall-1200.webp">
  <img src="/img/hall-1200.jpg" width="1200" height="800"
       alt="Зал ресторана на 40 мест с панорамными окнами">
</picture>

Размер под экран: srcset и sizes

Телефону не нужна картинка шириной 2000 пикселей. Атрибут srcset перечисляет варианты с их шириной, а sizes подсказывает браузеру, какой ширины будет картинка на экране. Браузер выбирает подходящий файл сам. Атрибут src нужен как запасной вариант для браузеров, которые не поддерживают srcset (MDN).

<img srcset="/img/card-480.webp 480w,
             /img/card-800.webp 800w,
             /img/card-1200.webp 1200w"
     sizes="(width <= 600px) 100vw, 400px"
     src="/img/card-800.webp"
     width="800" height="600" alt="Чайник со стеклянной колбой на кухонном столе">

Разумный набор ширин для большинства сайтов — 480, 800, 1200 и 1600 пикселей. Больше вариантов редко дают заметную пользу.

Размеры, чтобы страница не прыгала

Если у картинки не указаны width и height, браузер не знает, сколько места под неё оставить, и после загрузки текст сдвигается. web.dev называет изображения без размеров одной из самых частых причин плохого CLS и советует всегда указывать атрибуты или задавать CSS aspect-ratio (web.dev).

Атрибуты задают пропорции, а не жёсткий размер: с CSS max-width: 100% и height: auto картинка всё равно подстроится под ширину экрана.

Отложенная загрузка — только ниже первого экрана

Атрибут loading="lazy" откладывает загрузку изображения, пока человек не прокрутит страницу к нему (MDN). Это хорошо для картинок в каталоге, галереях и внизу статьи.

Но картинку первого экрана откладывать нельзя: web.dev прямо пишет, что отложенная загрузка LCP-изображения всегда добавляет задержку (web.dev). Для неё — наоборот, высокий приоритет:

<img src="/img/hero-1600.webp" width="1600" height="900"
     fetchpriority="high" alt="Монтажник устанавливает кондиционер в квартире">

Имена файлов и alt

• Короткие понятные имена файлов: hall-panoramic-windows.webp лучше, чем IMG_2041.webp. Google советует описательные имена и не рекомендует общие вроде image1.jpg.
• Alt описывает, что на картинке и зачем она на странице, без перечисления ключевых слов.
• Декоративные картинки, которые не несут смысла, получают пустой alt="".
• Изображения, которые должны находиться в поиске, — обычным тегом img, а не фоном из CSS: фоновые изображения Google не индексирует.

Чек-лист

Лучше всего, когда нарезка размеров и форматов происходит автоматически — при сборке сайта или загрузке в систему управления, — а не вручную для каждой картинки.

В разработке сайтов PIP перед запуском проверяются страницы и мобильная версия — см. страницу разработки. Сайт тяжёлый из-за картинок? Расскажите о задаче.

Короткие подсказки о сайтах и автоматизации — в Telegram-канале @pip_kz.