Откройте любой каталог интернет-магазина: 24, 48, а то и 96 карточек товаров на странице, и каждая — с фотографией. По данным Google, на изображения приходится 50–70% веса типовой страницы e-commerce. Пока пользователь ждёт загрузки «тяжёлых» JPEG, конверсия тает: каждая лишняя секунда отклика снижает вероятность покупки примерно на 7–16%. Хорошая новость в том, что ускорить каталог можно без редизайна и смены платформы — достаточно перевести графику на современные форматы и настроить умную загрузку. Разберём, как это работает и с чего начать.
Почему каталог тормозит: арифметика проблемы
Типовая карточка товара — фото 800×800 px, сохранённое в JPEG с качеством 90–100. Вес такого файла — 300–800 КБ, а страница категории с 40 товарами легко набирает 15–30 МБ. Для владельца это прямые деньги: медленный каталог ухудшает поведенческие факторы, поисковики понижают такие страницы в выдаче, а часть мобильного трафика просто уходит, не дождавшись товаров. Ключевая метрика здесь — LCP (Largest Contentful Paint): время отрисовки самого крупного элемента на экране, которым в каталоге почти всегда является изображение. Целевое значение — до 2,5 секунды, и без оптимизации картинок его не достичь.WebP и AVIF: сколько экономят современные форматы
Оба формата сжимают изображения эффективнее JPEG и PNG за счёт более продвинутых алгоритмов кодирования. Что важно знать владельцу магазина:- WebP — формат Google, поддерживается 97%+ браузеров, включая Chrome, Яндекс.Браузер, Safari 14+, Firefox и Edge. Экономит 25–35% веса против JPEG при том же визуальном качестве, поддерживает прозрачность и анимацию.
- AVIF — новейший формат на кодеке AV1. Сжимает до 50% лучше JPEG и заметно лучше WebP на сложных фотографиях. Поддержка — около 93% браузеров (Safari 16+ включительно).
- Обратная совместимость решается элементом picture со списком источников: старые браузеры получают JPEG, новые — AVIF или WebP.
- На практике: фото товара весом 400 КБ в JPEG превращается в ~260 КБ в WebP и ~190–220 КБ в AVIF — без заметной глазу потери качества.
Как подключить новые форматы и ничего не сломать
Главное правило: недостаточно просто переименовать файл в .webp — нужно реальное перекодирование. Для ручной конверсии удобен бесплатный сервис Squoosh, для автоматизации на сервере — библиотека sharp или утилиты cwebp/avifenc, а в популярных CMS и маркетплейсах есть готовые модули. Подключение делается через элемент picture с приоритетом от самого нового формата к самому совместимому: браузер сам выберет первый поддерживаемый источник, а старые клиенты получат JPEG-фолбэк. Для WebP достаточно качества 75–80 — на карточках товаров разница с оригиналом на глаз не видна, а вес снижается в разы. Генерируйте все форматы из одного мастер-файла, чтобы изображения не «разъезжались» по цвету и резкости.Lazy loading: грузим только то, что видно
Ленивая загрузка откладывает скачивание изображений до момента, когда пользователь доскроллит до них. В каталоге из 40 карточек это радикальная экономия: браузер сразу грузит первые 6–8 картинок, остальные подтягиваются по мере прокрутки. В современных браузерах достаточно добавить атрибут loading="lazy" к тегу img — нативная поддержка есть везде, библиотеки не нужны. Для старых решений используют LazySizes на IntersectionObserver. Важный нюанс: картинки первого экрана (первые ряды товаров, главный баннер) ленивую загрузку получать не должны — иначе просядет LCP.Адаптивные размеры: не отправляйте 4K-фото на смартфон
Мобильный трафик в российской e-commerce — около 70%, и отдавать смартфону изображение шириной 1920 px для картинки размером 200 px — расточительство. Решение — атрибуты srcset и sizes: вы генерируете 2–3 версии каждой картинки (например, 480, 800 и 1200 px), а браузер сам выбирает подходящую под экран и плотность пикселей. Это снижает вес мобильной версии каталога ещё на 40–60% поверх экономии от новых форматов. Дополнительно укажите главным изображениям атрибут fetchpriority="high", а всем картинкам — width и height: последние фиксируют место под фото и убирают «прыжки» layout при загрузке (метрика CLS).Чек-лист внедрения за 7 шагов
Полный цикл оптимизации каталога на средней торговой площадке занимает 1–2 недели работы разработчика:- Проведите аудит в Google PageSpeed Insights или Lighthouse: зафиксируйте вес страницы и долю изображений в нём.
- Перекодируйте фото товаров в WebP и AVIF, оставив JPEG как фолбэк; для иконок и мелкой графики используйте SVG.
- Добавьте width и height всем изображениям, чтобы исключить сдвиги layout.
- Проставьте loading="lazy" картинкам ниже первого экрана, а главным изображениям — fetchpriority="high".
- Настройте генерацию адаптивных размеров и подключите srcset/sizes.
- Включите кеширование статики и, если аудитория гео-распределённая, CDN.
- Через 2–3 недели повторите замеры и сверьте LCP, вес страницы и поведенческие метрики.
Ошибки, которые сводят эффект к нулю
- Ленивая загрузка на первом экране — LCP падает, PageSpeed покажет просадку вместо роста.
- Нет width/height у картинок — контент «прыгает» при подгрузке, растёт CLS, пользователи промахиваются по кнопкам.
- Слишком агрессивное сжатие (качество ниже 60) — на фото товаров появляются артефакты, а это прямое недоверие к магазину.
- Один формат без фолбэка — часть аудитории на старых браузерах увидит битые картинки.
- PNG для больших фотографий — формат для скриншотов и логотипов с прозрачностью; фото в нём весят в 3–5 раз больше.
- Конвертация без alt-текстов — вы теряете трафик из поиска по картинкам Яндекса и Google.
Как измерить результат
Ориентируйтесь на Core Web Vitals — метрики, влияющие на ранжирование: LCP до 2,5 с, CLS до 0,1, INP до 200 мс. Смотреть нужно и на лабораторные замеры в PageSpeed Insights, и на полевые данные в отчёте Search Console. После перевода каталога на WebP/AVIF с lazy loading типичный результат — снижение веса страницы категории с 10–15 МБ до 2–4 МБ и улучшение LCP на 30–50%. Дальше эффект виден в деньгах: снижается показатель отказов, растут глубина просмотра и доля мобильных пользователей, дошедших до карточки товара. В наших проектах оптимизация изображений стабильно входит в задачи с самым быстрым окупаемым эффектом.Оптимизация изображений — редкий случай, когда заметный прирост скорости достигается малой кровью: без редизайна, смены платформы и больших бюджетов. Форматы WebP и AVIF сокращают вес графики в 2–3 раза, lazy loading убирает лишние загрузки, а адаптивные размеры экономят мобильный трафик. Начните с аудита и конверсии форматов — это даст примерно 80% эффекта. Если хотите получить готовую реализацию под вашу CMS или маркетплейс с гарантированными метриками Core Web Vitals — напишите нам: проведём аудит скорости каталога и предложим план работ с оценкой по срокам и стоимости.