Как ускорить загрузку страницы за счёт картинок

Оптимизация изображений — это комплекс технических приёмов, направленных на сокращение размера графических файлов и ускорение их передачи по сети без существенной потери визуального качества, что напрямую влияет на скорость загрузки веб-страницы и пользовательский опыт.

Почему изображения замедляют загрузку

Изображения традиционно составляют наибольшую долю в общем весе веб-страницы. По данным HTTP Archive на начало 2026 года, медианный вес страницы на десктопе составляет около 2,5 МБ, из которых на картинки приходится порядка 900–1100 КБ — то есть более 40% всего трафика. При медленном соединении или мобильном интернете это критически влияет на время до первого отображения контента (FCP) и на показатель LCP (Largest Contentful Paint), который Google использует как один из ключевых сигналов Core Web Vitals.

• Среднее количество изображений на одной странице — 28–35 штук
• Медианный размер одного изображения без оптимизации — 180–220 КБ
• После грамотной оптимизации размер снижается на 40–70%
• Ускорение загрузки на 1 секунду повышает конверсию до 7% (данные Portent, 2026)

Выбор правильного формата изображения

Формат файла — первое и самое важное решение. Устаревшие форматы PNG и JPEG всё ещё распространены, однако современные альтернативы дают значительно лучший результат.

Формат	Средний размер (vs JPEG)	Поддержка браузерами (2026)	Лучшее применение
JPEG	100% (базовый)	100%	Фотографии, сложные изображения
PNG	120–150%	100%	Графика с прозрачностью
WebP	25–35% меньше JPEG	97,5%	Универсальный формат
AVIF	40–55% меньше JPEG	94%	Фото высокого качества
SVG	Зависит от сложности	99%	Иконки, логотипы, иллюстрации

AVIF в 2026 году является наиболее эффективным форматом для фотографий — он обеспечивает сжатие на 40–55% лучше, чем JPEG, при сопоставимом визуальном качестве.

Сжатие и качество: найти баланс

Сжатие бывает двух видов: без потерь (lossless) и с потерями (lossy). Для большинства веб-изображений допустима компрессия с потерями при качестве 75–85% — человеческий глаз практически не различает разницы, а размер файла сокращается многократно.

• Lossless-сжатие — подходит для PNG, SVG; уменьшает размер на 10–30% без изменения пикселей
• Lossy-сжатие — применяется к JPEG, WebP, AVIF; снижает размер на 40–80%
• Оптимальный уровень качества WebP — 75–82%
• Оптимальный уровень качества AVIF — 60–75% (визуально эквивалентен JPEG 90%)

Инструменты для сжатия в 2026 году:

• Squoosh (Google) — браузерный, бесплатный
• ImageOptim — macOS, поддержка AVIF
• Sharp (Node.js) — серверная автоматизация
• Cloudinary, ImageKit — CDN с автооптимизацией

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

Отдавать одно изображение всем устройствам — грубая ошибка. Смартфон с шириной экрана 390px не должен загружать картинку размером 1920px. HTML-атрибут srcset и элемент <picture> позволяют браузеру самостоятельно выбрать подходящий файл.

• Рекомендуемые брейкпоинты для srcset в 2026 году: 480w, 768w, 1024w, 1440w, 1920w
• Экономия трафика на мобильных устройствах при использовании srcset — до 60%
• Атрибут sizes необходимо задавать вручную для точного выбора браузером
• Элемент <picture> позволяет указывать разные форматы (AVIF → WebP → JPEG) через <source>

Ленивая загрузка (Lazy Loading)

Нативная ленивая загрузка через атрибут loading="lazy" поддерживается всеми современными браузерами и откладывает загрузку изображений, которые находятся вне области видимости пользователя.

• Поддержка loading="lazy" браузерами в 2026 году — 96,8%
• Снижение первоначального объёма загружаемых данных — на 30–50%
• Улучшение метрики LCP при правильном применении — до 25%

Важно: атрибут loading="lazy" нельзя применять к изображению, которое находится в верхней части экрана (above the fold) — это замедлит LCP вместо его улучшения. Для главного изображения следует использовать loading="eager" или вовсе не указывать атрибут.

Предварительная загрузка ключевых изображений

Для изображений, которые критически важны для LCP (обычно это hero-баннер или первый экран), используется тег <link rel="preload"> в секции <head>. Это даёт браузеру сигнал загрузить файл с наивысшим приоритетом, не дожидаясь разбора всего HTML.

• Preload улучшает LCP в среднем на 0,3–0,8 секунды
• Используется только для 1–2 наиболее важных изображений страницы
• Поддерживается всеми актуальными браузерами в 2026 году

Явное задание размеров изображений

Атрибуты width и height в теге <img> позволяют браузеру заранее зарезервировать место под изображение ещё до его загрузки. Это исключает эффект «прыжка» контента (CLS — Cumulative Layout Shift) и улучшает соответствующую метрику Core Web Vitals.

• Отсутствие явных размеров — одна из главных причин высокого CLS
• Хорошим показателем CLS считается значение менее 0,1 (порог Google)
• Задание aspect-ratio через CSS является допустимой альтернативой атрибутам width/height

CDN и кэширование изображений

Использование CDN (Content Delivery Network) позволяет раздавать изображения с серверов, географически близких к пользователю, что сокращает задержку (latency) и время передачи данных.

Решение	Автоформат	Автосжатие	Примерная стоимость (2026)
Cloudflare Images	Да	Да	$5/мес за 100 000 изображений
Cloudinary	Да	Да	Бесплатно до 25 ГБ
ImageKit	Да	Да	Бесплатно до 20 ГБ
Bunny.net	Частично	Да	$0,01 за ГБ трафика

Оптимальная стратегия кэширования изображений — задавать заголовок Cache-Control с max-age от 31 536 000 секунд (1 год) для статических ресурсов с версионированием в URL.

Автоматизация оптимизации в процессе разработки

Ручная оптимизация неэффективна при масштабировании. Современные инструменты сборки позволяют автоматизировать весь процесс.

• Next.js Image Component — автоматически конвертирует, сжимает и подбирает размер; встроен в Next.js 14/15
• Vite + vite-imagetools — трансформация изображений на этапе сборки
• Astro — встроенная оптимизация изображений из коробки
• WordPress — плагины ShortPixel, Imagify, WebP Express автоматически конвертируют в WebP/AVIF
• GitHub Actions / CI/CD — интеграция Sharp или Squoosh CLI для оптимизации при каждом деплое