Изображения: как убрать половину веса страницы за один спринт

Форматы, размеры, ленивая загрузка и приоритеты. Практический порядок работ, который снижает вес страницы вдвое без потери качества.

Производительность · Опубликовано: 27 мая 2026 г. · 2 мин чтения · Анна Ковалёва

На типичном сайте изображения — это 50–70% веса страницы. При этом почти всегда они грузятся в разрешении, которое пользователь не увидит, в формате десятилетней давности и без указания размеров. Это самый предсказуемый источник ускорения.

Шаг 1: перестаньте отдавать лишние пиксели

Картинка шириной 2400 px в контейнере на 600 px — это в 16 раз больше данных, чем нужно (площадь растёт квадратично). Решение — srcset с реальными брейкпоинтами вёрстки:

<img src="/img/hero-800.jpg" srcset="/img/hero-400.jpg 400w, /img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 100vw, 800px" width="800" height="450" alt="…">

Атрибуты width и height обязательны: без них браузер не знает пропорций и страница прыгает — прямой вклад в CLS.

Шаг 2: смените формат

AVIF в среднем на 40–50% легче JPEG при том же качестве, WebP — на 25–30%. Оба поддерживаются всеми актуальными браузерами. Схема с <picture> даёт запасной вариант:

<picture> <source type="image/avif" srcset="/img/hero.avif"> <source type="image/webp" srcset="/img/hero.webp"> <img src="/img/hero.jpg" width="800" height="450" alt="…"> </picture>

Для скриншотов интерфейсов и графиков с плоскими заливками PNG нередко оказывается легче AVIF — проверяйте, а не следуйте правилу вслепую.

Шаг 3: расставьте приоритеты

Ленивая загрузка не бесплатна. loading="lazy" на изображении первого экрана замедляет LCP, потому что откладывает самый важный запрос. Правило простое:

• изображения выше сгиба — fetchpriority="high", без lazy;
• всё остальное — loading="lazy" и decoding="async".

Шаг 4: уберите то, что не нужно

Самая эффективная оптимизация — не оптимизировать, а удалить. Декоративный фон, который на мобильных не виден; карусель из восьми баннеров, до третьего из которых доходит 4% пользователей; иконки в PNG, которые должны быть SVG или шрифтовыми глифами.

Что мерить

Смотрите не на «оценку», а на два числа: вес изображений на странице и время до LCP на мобильной сети. Если вес упал вдвое, а LCP не сдвинулся — узкое место не в картинках, а в очереди запросов или в ответе сервера, и дальше оптимизировать изображения бессмысленно.

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