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

Главный вывод: изображения на сайте обычно составляют 60–80% объёма загрузки и являются первой узкой точкой производительности фронтенда. Стратегия оптимизации — 4 шага: обновление формата (JPEG/PNG → WebP/AVIF), адаптивные изображения (srcset по устройствам), ленивая загрузка (изображения за пределами первого экрана), сжатие на CDN-краях (автоматический транскодинг и обрезка). На одном кейсе изображения главной e-commerce с 3,2 МБ оптимизированы до 480 КБ, LCP с 4,2 с до 1,5 с, отказы снизились на 23%. Ниже — связь объёма и производительности, стратегии и практический кейс.

Если вы пока не знакомы с принципами форматов сжатия, рекомендуем сначала прочитать Руководство по сжатию изображений: сравнение JPG/PNG/WebP.

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

В процессе загрузки страницы изображения — крупнейший потребитель трафика. По статистике HTTP Archive, средняя веб-страница загружает около 1,1 МБ изображений — более 60% общего объёма. Объём изображений напрямую влияет на LCP (Largest Contentful Paint) — ключевой показатель Web Vitals, важный и для ранжирования Google. Понять эту связь — значит понять отправную точку оптимизации.

Объём изображений	Среднее время загрузки (4G)	Влияние на отказы	Ожидаемый LCP	Оценка опыта
100 КБ	0,1 с	Базовый	0,8 с	Отлично
500 КБ	0,4 с	+3,5%	1,5 с	Хорошо
1 МБ	0,8 с	+7%	2,5 с	Нормально
2 МБ	1,6 с	+14%	3,8 с	Плохо
3 МБ+	2,4 с+	+21%	5 с+	Очень плохо

Из таблицы: каждые +100 КБ объёма изображений увеличивают отказы примерно на 7%. Когда изображения первого экрана превышают 2 МБ, LCP выходит за 3-секундную границу — пользовательский опыт заметно падает. На мобильных устройствах влияние сильнее: 3 МБ в 4G загружаются 2,4 с, а в слабой сети — более 8 с, что ведёт к прямой потере пользователей.

2. Четыре стратегии оптимизации изображений

Для борьбы с объёмом изображений есть четыре ключевые стратегии. У каждой свой принцип и своя область — сначала общее сравнение, затем подробно по каждой.

Стратегия	Принцип	Сценарий	Снижение объёма	Сложность внедрения
Обновление формата	JPEG/PNG → WebP/AVIF	Все изображения сайта	25%–50%	★☆☆☆☆
Адаптивные изображения	srcset загружает по устройству	Многотерминальные страницы	40%–70%	★★☆☆☆
Ленивая загрузка	Изображения за пределами первого экрана отложены	Длинные/богатые изображениями страницы	Первый экран −60%–80%	★☆☆☆☆
Сжатие на CDN-краях	Транскодинг и обрезка в реальном времени	Массовая раздача изображений	30%–60%	★★★☆☆

2.1. Обновление формата: WebP и AVIF

Обновление формата — самое выгодное по соотношению цена/эффект. WebP при том же качестве даёт на 25%–35% меньше по сравнению с JPEG, и более 60% — по сравнению с PNG, при этом поддерживает прозрачность. AVIF построен на технологии кодирования видео AV1, сжимает ещё на 10%–20% лучше WebP — это самый компактный формат на сегодня. Подробное сравнение — в WebP против PNG против JPG: сравнение форматов.

Формат	Тип сжатия	Объём при равном качестве (vs JPEG)	Поддержка браузерами	Прозрачность
JPEG	С потерями	Базовый (100%)	100%	Нет
PNG	Без потерь	200%–400%	100%	Да
WebP	С потерями / без потерь	65%–75%	98%	Да
AVIF	С потерями / без потерь	50%–65%	93%	Да

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

2.2. Адаптивные изображения: srcset по устройствам

Адаптивные изображения через атрибут srcset позволяют браузеру автоматически выбрать подходящий размер по ширине экрана и DPR. Баннер 1920px на смартфоне нужен всего 640px, но без адаптивности телефон скачает полный 1920px — пустая трата более 75% трафика.

Тип устройства	Типичная ширина	DPR	Требуемая ширина	Перерасход оригинала
Десктоп-монитор	1920px	1x	1920px	0%
Ноутбук	1366px	1,5x	2049px	0%
Планшет	768px	2x	1536px	20%
Смартфон	375px	3x	1125px	41%
Маленький смартфон	320px	3x	960px	50%

С srcset смартфон загружает изображение 960px вместо 1920px — экономия около 75%. Связка с атрибутом sizes, описывающим отображаемый размер при разных вьюпортах, позволяет браузеру выбрать оптимум автоматически.

2.3. Ленивая загрузка: отложить за пределами первого экрана

Ленивая загрузка загружает только изображения в зоне видимости, остальные подтягиваются при прокрутке. Родной HTML-атрибут loading="lazy" делает это без каких-либо JS-библиотек. Для списка товаров с 30 изображениями на первом экране обычно видно 4–6 — ленивая загрузка сокращает запросы первого экрана с 30 до 6, объём первого экрана падает более чем на 80%.

Тип страницы	Всего изображений	Видно на первом экране	Запросов на первом экране после ленивой загрузки	Снижение объёма первого экрана
Главная e-commerce	45	8	8	82%
Листинг товаров	30	6	6	80%
Страница блога	12	3	3	75%
Фотогалерея	60	9	9	85%

Важно: изображения первого экрана (элементы LCP) нельзя лениво загружать — это задержит LCP. Ленивым изображениям рекомендуется задавать width и height, резервируя место во избежание CLS (Cumulative Layout Shift).

2.4. Сжатие на CDN-краях: транскодинг в реальном времени

Сжатие на CDN-краях обрабатывает изображения прямо на узлах CDN: по Accept-заголовку клиента автоматически отдаёт WebP или AVIF, по параметрам URL динамически обрезает размер. Менять исходные изображения на источнике не нужно — достаточно подключить CDN с поддержкой обработки. Среди популярных решений: Cloudflare Images, Alibaba Cloud IMG, Qiniu Cloud Dora — все поддерживают перевод формата, обрезку размера, настройку качества.

3. Практический кейс: главная e-commerce с 3,2 МБ до 480 КБ

Главная страница трансграничного интернет-магазина, исходный объём изображений первого экрана — 3,2 МБ: 1 Hero-баннер (1,8 МБ JPEG), 6 карточек товаров (по 200–250 КБ JPEG), 3 промо-картинки (по 150 КБ PNG). LCP — 4,2 с, отказы на мобильных — 58%. Цель оптимизации: изображения первого экрана до 500 КБ, LCP — до 2 с.

Характеристики страницы: 10 изображений на первом экране, Hero-баннер 1920×600 JPEG 1,8 МБ, товары 800×800 JPEG по 230 КБ, промо 600×400 PNG по 150 КБ, адаптивность и ленивая загрузка отсутствуют.

Параметры и изменение объёма:

Шаг	Действие	Ключевые параметры	Изменение объёма
1	Сжатие Hero-баннера	JPEG→AVIF q70, 1920px	1,8 МБ→0,42 МБ
2	Сжатие товаров	JPEG→WebP q75, 800px	1,38 МБ→0,39 МБ (6 шт.)
3	Сжатие промо	PNG→WebP без потерь, 600px	0,45 МБ→0,12 МБ (3 шт.)
4	Адаптивная вёрстка	srcset с 480/800/1920	На смартфоне ещё −40%
5	Ленивая загрузка	loading=lazy для не-первого экрана	Запросы первого экрана с 8 до 4

Результат: общий объём изображений первого экрана с 3,2 МБ до 480 КБ (снижение 85%), LCP с 4,2 с до 1,5 с, отказы на мобильных с 58% до 35%. AVIF нормально отображается в Chrome и Firefox, в Safari идёт фолбэк на WebP, в IE — на JPEG, проблем совместимости нет. На CDN включены автоматическое согласование формата и краевой кэш, коэффициент попадания при повторных визитах — 92%.

4. Рекомендации по оптимизации для разных сценариев

У разных типов страниц разные характеристики изображений и фокус оптимизации. Ниже — рекомендации для распространённых сценариев.

Тип страницы	Характеристика изображений	Главное узкое место	Рекомендуемая стратегия	Ожидаемый LCP
Главная e-commerce	Большой баннер + сетка товаров	Hero-изображение слишком большое	AVIF + адаптивность + ленивая загрузка	1,5 с
Новостной портал	Заглавное фото + иллюстрации в тексте	Заглавное фото не сжато	WebP + ленивая загрузка + обрезка на CDN	1,8 с
Фотогалерея	Большое число HD-изображений	Слишком много изображений на первом экране	Превью + ленивая загрузка + загрузка оригинала по клику	2,0 с
Корпоративный сайт	Дизайнерские большие изображения	PNG с прозрачностью велик	WebP без потерь + адаптивность	1,6 с
Блог	Иллюстрации в тексте	Размеры изображений не стандартизированы	Единое сжатие + WebP + ленивая загрузка	1,5 с
Админ-панель	Иконки + скриншоты	Иконки не объединены	SVG-иконки + спрайты + ленивая загрузка	1,0 с

Общий принцип: изображения первого экрана приоритетно сжимать в AVIF/WebP с адаптивностью, за пределами первого экрана — всё лениво загружать, при массовой раздаче подключать CDN с краевой обработкой. Комбинация из четырёх шагов снижает объём изображений большинства страниц до 15%–30% от исходного.

5. Часто задаваемые вопросы (FAQ)

В1. Какая стратегия оптимизации изображений на сайте самая важная?

Главное — правильный выбор формата и сжатие объёма. В первую очередь WebP или AVIF вместо JPEG/PNG — минус 25%–50% объёма; затем адаптивный srcset, подбирающий разрешение под устройство; затем ленивая загрузка для изображений за пределами первого экрана; и наконец сжатие на CDN-краях с автоматическим переводом формата. Четыре шага вместе снижают объём изображений первого экрана с 3,2 МБ до 480 КБ, LCP — с 4,2 с до 1,5 с.

В2. WebP или AVIF — что лучше для веб-изображений?

WebP лучше по совместимости (98% браузеров), подходит как основной формат с быстрым внедрением. AVIF сжимает ещё на 10%–20% лучше, но поддержка около 93% — рекомендуем как прогрессивное улучшение. Лучшая практика — picture с предложением AVIF и фолбэком WebP: поддерживающие браузеры берут AVIF, остальные — WebP.

В3. Влияет ли ленивая загрузка изображений на SEO?

Грамотная ленивая загрузка не ухудшает SEO. Ключевое правило: изображения первого экрана не ленивые (это влияет на оценку LCP), ленивая только для за пределами первого экрана с loading=lazy. Краулер Google рендерит ленивые изображения, но рекомендуем добавлять width/height для исключения CLS и alt для описания содержимого.

В4. В чём разница между сжатием на CDN и локальным сжатием?

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

Заключение

Изображения на сайте составляют более 60% объёма загрузки — это первоочередная цель оптимизации фронтенда. Логика четырёх стратегий ясна: обновление формата WebP/AVIF вместо JPEG/PNG (минус 25%–50%), адаптивные изображения под устройство (минус 40%–70%), ленивая загрузка за пределами первого экрана (минус 60%–80% на первом экране), сжатие на CDN-краях в реальном времени (минус 30%–60%). Четыре шага вместе стабильно снижают объём изображений главной e-commerce с 3,2 МБ до 480 КБ.

Три правила: во-первых, изображения первого экрана приоритетны (напрямую влияют на LCP), обновление формата и адаптивность обязательны; во-вторых, ленивая загрузка только для изображений за пределами первого экрана, элементы LCP первого экрана не ленивые; в-третьих, фолбэк формата должен быть полным: AVIF → WebP → JPEG, трёхуровневый фолбэк гарантирует 100% совместимости. Оптимизация изображений — самое выгодное по соотношению затрат и эффекта средство производительности, достойное внимания в каждом фронтенд-проекте.