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

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

Схема одна и та же для WP, Next.js и лендингов: загрузка → ресайз → конвертация → сжатие → отдача через CDN. Ошибка №1 — хранить оригиналы в 4000px и надеяться на CSS. Браузер всё равно качает лишнее, а LCP уезжает.

Базовый пайплайн:
— исходник режем до максимальной ширины контента;
— делаем 2–3 размера под desktop/mobile/retina;
— отдаём WebP или AVIF, а fallback оставляем для старых браузеров;
— ставим lazy load ниже первого экрана;
— для hero-картинки lazy не нужен, ей важнее preload.

Если сайт на WordPress, не ставьте по два плагина на одну задачу: один для ресайза, второй для WebP, третий для lazy load. Конфликты часто ломают srcset и генерят дубли. Лучше один инструмент, который умеет resize + format conversion + cleanup медиабиблиотеки.

Перед запуском проверьте 3 вещи: вёрстка не растягивает картинку выше исходного размера; CDN кеширует уже оптимизированный файл; на мобильном нет скачка CLS из-за отсутствия width/height. Для замера смотрите вес страницы, LCP и число запросов к картинкам.

Если есть только одна правка, начните с hero-image: правильный размер и формат там обычно дают больше эффекта, чем весь остальной медиа-блок.