Картинки на сайте: форматы, размеры и ленивая загрузка

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

Разберём форматы, адаптивные размеры, ленивую загрузку и как автоматизировать всё это, чтобы редакторам не приходилось думать о пикселях.

Почему картинки замедляют сайт?

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

Типичные проблемы:

• оригиналы с камеры или из дизайна без сжатия и изменения размера;
• устаревшие форматы, которые весят в разы больше современных;
• одна большая картинка для всех экранов — от телефона до широкого монитора;
• ленивая загрузка главного изображения первого экрана;
• отсутствие ширины и высоты — отсюда сдвиги вёрстки.

Как всё это отражается на оценке скорости, мы разбирали в статье Core Web Vitals.

Какой формат изображений выбрать?

Для фотографий выбирайте AVIF или WebP, для иконок и логотипов — SVG, а JPEG и PNG оставьте как запасной вариант для редких устаревших браузеров. Современные форматы при том же визуальном качестве весят заметно меньше.

Формат	Для чего подходит	Особенности
AVIF	Фотографии, баннеры	Самый компактный, кодирование медленнее
WebP	Фотографии и графика с прозрачностью	Хороший баланс веса и скорости кодирования
SVG	Логотипы, иконки, схемы	Векторный, чёткий на любом экране
JPEG	Запасной вариант для фотографий	Больше весит, поддерживается везде
PNG	Запасной вариант для графики с прозрачностью	Тяжёлый для фотографий

Фото: Unsplash

Как отдавать картинки нужного размера?

Нужный размер отдают через атрибуты srcset и sizes: браузер сам выбирает подходящую версию изображения по ширине экрана и плотности пикселей. Для этого каждое изображение заранее или на лету нарезают в нескольких размерах.

<picture>
  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" sizes="100vw">
  <img
    src="/img/hero-1600.webp"
    srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w"
    sizes="100vw"
    width="1600" height="900"
    alt="Команда обсуждает проект"
    fetchpriority="high">
</picture>

Правила для разметки

1. Всегда указывайте width и height — браузер зарезервирует место, и вёрстка не прыгнет.
2. Главному изображению первого экрана — высокий приоритет загрузки и никакой ленивой загрузки.
3. Остальным изображениям — loading="lazy": они загрузятся, когда пользователь до них доскроллит.
4. Заполняйте alt у содержательных изображений — это важно для доступности и поиска.

Как автоматизировать обработку изображений?

Обработку автоматизируют, чтобы редакторы загружали изображения как есть, а система сама сжимала их, переводила в современные форматы и нарезала размеры. Для этого есть два подхода: обработка при загрузке и CDN с преобразованием изображений на лету.

Варианты:

• при загрузке — фоновая задача создаёт версии нужных размеров и форматов и сохраняет их в хранилище;
• на лету — CDN или сервис изображений получает параметры в адресе (ширину, формат, качество) и кеширует результат;
• при сборке — фреймворк оптимизирует изображения, лежащие в коде сайта, во время сборки.

Как устроить хранение и раздачу файлов, мы разбирали в статье загрузка и хранение файлов.

Как проверить, что с картинками всё в порядке?

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

Что проверить:

• вес всех изображений на ключевых страницах и самые тяжёлые из них;
• формат: нет ли фотографий в PNG и оригиналов без сжатия;
• что главное изображение не загружается лениво;
• что у всех изображений есть размеры, а у содержательных — alt;
• что на телефоне загружаются уменьшенные версии, а не оригиналы.

Коротко

• Картинки — главный источник лишнего веса страницы и самое простое место для ускорения.
• Фотографии — в AVIF или WebP, иконки и логотипы — в SVG.
• Отдавайте несколько размеров через srcset и sizes и всегда указывайте ширину и высоту.
• Главное изображение первого экрана — с высоким приоритетом, остальные — лениво.
• Автоматизируйте сжатие и нарезку при загрузке или через CDN изображений.