Image optimization pipeline: схема, которая режет вес страниц без потери качества

Image optimization pipeline: схема, которая режет вес страниц без потери качества

Сначала не «сжимайте всё подряд», а разделите картинки по роли: hero, контент, иконки, превью, фон. Для каждой роли — свой формат, размер и правило загрузки. Одна и та же оптимизация для всех файлов почти всегда даёт лишний вес или мыло.

Базовый пайплайн простой:
— загрузка в исходнике;
— ресайз под реальные брейкпоинты;
— конвертация в AVIF/WebP с fallback на JPEG/PNG;
— strip metadata;
— генерация srcset/sizes;
— lazy-load для всего, что ниже первого экрана.
Если у вас WordPress, это часто закрывается связкой плагина + CDN + нормального кеша, без ручной возни.

Главная ошибка — отправлять на CDN один огромный файл и надеяться на автооптимизацию. CDN не угадает, какой размер нужен на мобилке, а браузер всё равно скачает лишнее, если srcset не настроен. Ещё одна типовая проблема — фоновые изображения в CSS: их часто забывают ограничить по ширине и они бьют по LCP.

Проверяйте не «степень сжатия», а три метрики: вес страницы, LCP и долю изображений в общем трафике. Если hero-картинка всё ещё весит сотни килобайт, сначала уменьшайте реальный размер, потом качество, и только потом включайте агрессивное сжатие.

Итог: нормальная схема оптимизации начинается с размеров и форматов, а не с кнопки «compress all».