Оптимизация изображений для скорости сайта: полное руководство

Почему изображения — главная проблема производительности

По данным HTTP Archive за 2026 год, изображения занимают около 50 % трафика средней веб-страницы. Медиана — 2,8 МБ картинок, больше чем JS, CSS, шрифты и HTML вместе. На e-commerce и новостных сайтах цифра может превышать 10 МБ.

Скорость напрямую влияет на бизнес:

Конверсия — каждая секунда ускорения даёт +2 % конверсии (данные Walmart).
Отказы — при росте загрузки с 1 до 3 с вероятность отказа растёт на 32 %, с 1 до 5 с — на 90 %.
SEO — Core Web Vitals (LCP, INP, CLS) — факторы ранжирования Google. Неоптимизированные картинки ухудшают LCP.
Доступность — пользователи на медленных соединениях страдают от тяжёлых изображений.

Core Web Vitals и изображения

Largest Contentful Paint (LCP)

LCP — время отрисовки крупнейшего видимого элемента. Обычно это изображение (hero-баннер, фото товара). Хороший LCP — менее 2,5 с.

Как улучшить LCP:

Агрессивно сжимайте hero-изображение.
Предзагружайте его: <link rel="preload" as="image" href="hero.webp">.
Не применяйте lazy-loading к LCP-изображению.
Используйте CDN и подавайте правильный размер.

Cumulative Layout Shift (CLS)

CLS — визуальная стабильность. Изображения без width и height вызывают сдвиги макета.

<!-- Плохо: вызывает сдвиг -->
<img src="photo.webp" alt="Product">

<!-- Хорошо: браузер резервирует место -->
<img src="photo.webp" alt="Product" width="800" height="600">

<!-- Тоже хорошо: CSS aspect-ratio -->
<img src="photo.webp" alt="Product" style="aspect-ratio: 4/3; width: 100%;">

Выбор формата

Дерево решений на 2026 год:

Фото или сложное изображение? → WebP (lossy) или AVIF.
Простая графика, логотип, иконка? → SVG. Если растр — WebP (lossless).
Нужна прозрачность? → WebP или AVIF.
Анимация? → Animated WebP или <video> (MP4/WebM часто эффективнее).

Сжатие: поиск баланса

Зависимость качества и размера нелинейна — снижение с 95 до 80 может уменьшить файл на 60 %, а с 80 до 65 — ещё на 20 %.

Сценарий	Формат	Качество	Экономия
Hero-баннеры	WebP или AVIF	80–85	50–70 %
Картинки в статьях	WebP	75–80	60–75 %
Миниатюры товаров	WebP	70–75	70–80 %
Фоновые изображения	WebP или AVIF	60–70	75–85 %
Пользовательский контент	WebP	75	60–75 %

Deflato показывает предпросмотр в реальном времени при изменении quality.

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

Подача одного изображения 2400 px всем устройствам расточительна. Используйте srcset:

<img
  srcset="photo-400.webp 400w,
          photo-800.webp 800w,
          photo-1200.webp 1200w,
          photo-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         800px"
  src="photo-800.webp"
  alt="Product photo"
  width="1600"
  height="1200"
  loading="lazy"
>

Генерация нескольких размеров — через Sharp, плагин CMS или Deflato API.

Ленивая загрузка

Откладывает загрузку изображений за пределами первого экрана:

<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">

Правила:

Не применяйте lazy-loading к LCP-изображению — это ухудшит LCP.
Всегда указывайте width и height — иначе будут сдвиги (CLS).
Используйте fetchpriority="high" для LCP-изображения.

<!-- Hero: немедленная загрузка -->
<img src="hero.webp" alt="Hero" fetchpriority="high" width="1600" height="600">

<!-- Остальные: ленивая загрузка -->
<img src="photo-2.webp" alt="Photo 2" loading="lazy" width="800" height="600">

CDN для доставки изображений

CDN подаёт изображения с ближайшего сервера, сокращая задержку на 50–200 мс. Многие CDN предлагают:

Автоопределение формата — AVIF, WebP или JPEG в зависимости от заголовка Accept.
Динамическое масштабирование — размер через URL-параметры.
Автоматическая оптимизация качества — в зависимости от скорости соединения.

Популярные CDN: Cloudflare Images, Bunny Optimizer, Imgix, Cloudinary, Fastly.

Автоматизация и CI/CD

Ручная оптимизация не масштабируется. Интегрируйте в сборку:

SSG — плагины: @astrojs/image, next/image, gatsby-plugin-image.
CMS — вебхук на Deflato API при загрузке.
CI/CD — шаг оптимизации перед деплоем.

# Пример: сжатие перед деплоем
for f in public/images/*.{jpg,png}; do
  curl -s -X POST https://deflato.com/api/v1/compress     -H "Authorization: Bearer $DEFLATO_API_KEY"     -F "file=@$f"     -F "output_format=WEBP"     -F "quality=80"     --output "${f%.*}.webp"
done

Чек-лист оптимизации

WebP или AVIF по умолчанию (JPEG как фоллбэк).
Quality 75–80 для фото.
Масштабирование до реального размера отображения.
Адаптивные варианты через srcset.
width и height на каждом <img>.
loading="lazy" для изображений ниже первого экрана.
Предзагрузка LCP-изображения.
Удаление метаданных (EXIF, ICC).
CDN для глобальной доставки.
Автоматизация в пайплайне сборки.

Заключение

Оптимизация изображений — не разовая задача, а постоянная практика. Современные форматы, сжатие, адаптивные размеры, ленивая загрузка и CDN по отдельности дают умеренный эффект, но вместе сокращают вес картинок на 80–95 %. Deflato берёт на себя сжатие и конвертацию, фреймворки и CDN — доставку. Результат: быстрые страницы, лучшее SEO, довольные пользователи.