Image optimization pipeline: схема, которая режет вес без потери заметного качества
1) Исходник не должен ехать в прод как есть. Сначала приводим изображения к нужным размерам: для контента — несколько фиксированных ширин, для превью — отдельные миниатюры. Одна картинка на 4000 px, вставленная в блок 800 px, просто тратит трафик и CPU.
2) Дальше конвертация в WebP/AVIF там, где браузер поддерживает формат, и fallback на JPEG/PNG. Логика простая: фото — сжатие с потерями, графика с текстом — аккуратнее, иначе мыло и ореолы вокруг шрифтов.
3) Потом ленивую загрузку и приоритеты. Все, что ниже первого экрана, грузим отложенно; LCP-изображение — наоборот, выносим в preload и не прячем за тяжелыми слайдерами. Если hero-картинка появляется поздно, Core Web Vitals улетают первыми.
4) Последний слой — CDN и кеш. Отдавайте уже подготовленные размеры с edge, а не пересобирайте файл на каждом запросе. Для WordPress это обычно связка: генерация размеров на сервере, отдельный плагин для конвертации, CDN для раздачи, и правило, которое не пропускает оригиналы в шаблон.
Если держать пайплайн в таком порядке, сайт получает меньший вес, стабильнее LCP и меньше сюрпризов при росте трафика.
Webmaster Stack — хостинг, CDN, безопасность
@webmaster_stack
Image optimization pipeline: схема, которая режет вес без потери заметного качества
Этот пост опубликован в Telegram-канале Webmaster Stack — хостинг, CDN, безопасность. Подписаться можно по ссылке: @webmaster_stack.