Guide 15 мая 2026 г. 2 мин чтения

Как оптимизировать изображения в магазине Shopify (и ускорить загрузку на 2 секунды)

Практическое руководство по оптимизации изображений Shopify: как сжать фото для Shopify без потери качества — современные форматы (WebP/AVIF), размеры, lazy-loading и пакетная конвертация.

#shopify
#производительность
#webp
#avif
#e-commerce

Почему изображения Shopify убивают вашу конверсию

На средней карточке товара Shopify изображения составляют 60–80 % общего веса страницы. Каждая выигранная секунда загрузки — это примерно 4–7 % дополнительной конверсии (источник: исследование Deloitte «Milliseconds Make Millions», 2020).

Классическая проблема:

Тема принимает исходное изображение в JPG 4000×3000 (8 МБ).
Shopify уменьшает его на стороне CDN, но сохраняет входной формат.
Мобильный посетитель скачивает JPG на 350 КБ там, где хватило бы WebP на 90 КБ — при визуально полностью идентичном результате.

На 20 товарах × 5 изображений на карточку это означает более 25 МБ напрасно переданных данных за сессию.

Три рычага, которые стоит задействовать

1. Конвертировать исходники в WebP (или AVIF)

Формат WebP в среднем на 30 % легче эквивалентного JPG при одинаковом воспринимаемом качестве. AVIF опускается ещё ниже (до −50 % против JPG), но его поддержка пока неидеальна в некоторых старых браузерах.

Практическое правило: загружайте мастер-файлы в WebP с качеством 82–88. Это золотая середина между весом и точностью цвета.

2. Откалибровать реальный размер отображения

Незачем отдавать изображение 2400×1800, если оно показывается как 600×450 в теме. Для большинства тем Shopify (Dawn, Sense, Refresh):

Расположение	Рекомендуемая нативная ширина
Hero на главной	1920 px
Карусель товара	1200 px
Миниатюра коллекции	600 px
Изображение в блоге	1200 px

3. Включить `loading="lazy"` везде за пределами первого экрана

Shopify добавляет это по умолчанию в свежих темах, но проверьте свои кастомные секции (Liquid) — тег <img> без атрибута блокирует LCP.

Конкретный рабочий процесс в 4 шага

Аудит: Lighthouse → вкладка Opportunities → «Serve images in next-gen formats».
Подготовьте пакет фотографий товаров в .jpg высокого разрешения.
Сконвертируйте весь пакет в WebP с помощью MediaBay — перетащите файлы, формат на выходе WebP, качество 85, максимальный размер 1200 px.
Перезалейте в Shopify (админка → Файлы, или прямо в карточку товара). CDN Shopify затем будет отдавать нужный размер в зависимости от области просмотра.

Реальный кейс: −1,8 с по LCP в магазине одежды

В магазине клиента (каталог ~40 позиций):

LCP до: 3,2 с (мобильный 4G)
LCP после пакетной конвертации в WebP: 1,4 с
Средний вес карточки товара: 2,8 МБ → 720 КБ

SEO-эффект мгновенный: с 2023 года поисковики понижают страницы, у которых LCP превышает 2,5 с.

А что с конфиденциальностью ваших изображений?

Многие онлайн-инструменты конвертации отправляют ваши изображения на свои серверы — это риск для персональных данных, если на фото есть люди, конфиденциальные прототипы или просто ваш каталог до запуска.

MediaBay конвертирует на 100 % локально в вашем браузере, через WebAssembly. Никакой загрузки, никакого хранения на стороне сервера. Проверяется во вкладке Network в DevTools.

TL;DR

Конвертируйте JPG в WebP с качеством 85, максимальный размер 1200 px по ширине товара.
Проверьте loading="lazy" на всех <img> за пределами первого экрана.
Замеряйте через Lighthouse до/после — цель LCP < 2,5 с.
Делайте это без загрузки фотографий: конвертируйте локально.