Оптимизация изображений для сайта: WebP, AVIF, srcset и lazy loading

Главное за минуту

Изображения часто составляют самую тяжёлую часть страницы и нередко являются LCP-элементом. Оптимизация сводится к четырём вещам:

1. Правильный формат — WebP или AVIF вместо тяжёлых JPEG/PNG.
2. Правильный размер — браузер скачивает картинку под ширину экрана, а не оригинал.
3. Правильный момент загрузки — то, что ниже первого экрана, грузится позже.
4. Зарезервированное место — чтобы страница не прыгала при загрузке.

Как выбрать формат

Отдавать несколько форматов можно через <picture> — браузер возьмёт первый поддерживаемый:

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg" alt="Описание" width="1200" height="630">
</picture>

Сжатие

• Сжатие с потерями почти всегда допустимо для фото. Подбирайте качество на глаз на реальных примерах, а не одной цифрой для всего.
• Удаляйте метаданные (EXIF) — они бесполезны для страницы.
• Не храните в репозитории «сырые» снимки с камеры как готовые ресурсы — прогоняйте их через сборку или инструменты вроде Squoosh, sharp, imagemin.

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

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

<img
  src="/img/card-800.webp"
  srcset="/img/card-400.webp 400w, /img/card-800.webp 800w, /img/card-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 33vw"
  alt="Описание карточки"
  width="800" height="600">

Частая ошибка — не указать sizes: тогда браузер считает, что картинка занимает всю ширину экрана, и скачивает самый большой вариант.

Lazy loading

• Атрибут loading="lazy" откладывает загрузку изображений, пока они не приблизятся к видимой области. JavaScript для этого не нужен.
• Не ставьте его на изображения первого экрана и особенно на LCP-картинку — это замедлит отрисовку.
• Для главного изображения, наоборот, можно добавить fetchpriority="high".
• decoding="async" помогает не блокировать основной поток декодированием.

Размеры и CLS

Если у <img> нет width и height, браузер не знает пропорций, пока файл не загрузится, и контент ниже «прыгает». Это ухудшает метрику CLS.

• Всегда указывайте width и height (реальные пропорции), а в CSS — height: auto для адаптивности.
• Для контейнеров с фоновыми изображениями используйте aspect-ratio.

Image CDN и фреймворки

Вручную нарезать варианты для каждой картинки неудобно. Обычно это автоматизируют:

• Image CDN — сервис или свой прокси, который на лету меняет размер, формат и качество по параметрам URL и кэширует результат.
• Компоненты фреймворков — например, next/image в Next.js генерирует srcset, отдаёт современные форматы и по умолчанию включает ленивую загрузку.

При выборе смотрите на: поддержку AVIF/WebP, автоматическое определение формата по заголовку Accept, кэширование и стоимость трафика.

Чек-лист

• Фото в WebP/AVIF с fallback.
• srcset + корректный sizes.
• loading="lazy" только ниже первого экрана.
• width/height или aspect-ratio у всех изображений.
• Осмысленный alt для контентных картинок, пустой alt="" для декоративных.
• Метаданные удалены, SVG оптимизированы.