Оптимизация изображений Shopify для ускорения магазинов

Последнее обновление: June 28, 2026

Оптимизация изображений в Shopify — это в основном проблема рабочего процесса. Владельцы магазинов загружают большие фотографии товаров, темы запрашивают больше пикселей, чем нужно макету, а витрина платит за это на мобильных устройствах. Исправьте исходный файл, запрос темы и опубликованный CDN URL в таком порядке.

Это руководство посвящено страницам товаров, сеткам коллекций, изображениям-героям и редакционным изображениям внутри магазина Shopify. Оно избегает выдуманных заявлений о конверсии и предоставляет вам проверки, которые вы можете запустить перед заменой живого медиаконтента.

Краткий ответ: как оптимизировать изображения в Shopify?

Используйте самое маленькое изображение, которое все еще выглядит четким в самом большом размере, который Shopify будет отображать. Для большинства фотографий товаров начните с чистого мастер-файла, обрежьте его под макет магазина, измените размер до самой большой реальной ширины отображения, а затем экспортируйте кандидата WebP с качеством около 80–85. Проверьте результат на телефоне, прежде чем заменять изображение.

Shopify может предоставлять URL-адреса изображений через свою CDN и фильтры изображений Liquid. Важно запрашивать правильную ширину в теме, а не загружать огромный файл и надеяться, что браузер его дешево уменьшит. Фильтр image_url Shopify поддерживает параметры ширины и высоты в Liquid, что является "крючком", который разработчики должны использовать для адаптивной разметки изображений в темах.

Для быстрой проверки магазина сначала проверьте эти четыре места:

1. Основное изображение страницы продукта.
2. Миниатюры в сетке коллекции.
3. Изображение героя или баннер на главной странице.
4. Изображения блога и руководств внутри витрины Shopify.
5. Любое изображение галереи, обзора или дополнительной продажи, внедренное приложением.

Если одно из этих изображений является элементом Largest Contentful Paint, обрабатывайте его отдельно. Не используйте ленивую загрузку для первого видимого изображения героя или продукта; сделайте его обнаруживаемым рано и предоставьте правильные размеры.

Какие размеры изображений должны использовать магазины на Shopify?

Не существует единого размера изображения Shopify, который подходил бы для каждой темы. Изображение продукта, отображаемое размером 720 CSS pixels в двухколоночном макете для рабочего стола, требует другого файла, чем полноширинный баннер на телефоне с Retina-дисплеем. Начните с отрисованного слота, а затем предоставьте достаточно пикселей для экранов высокой плотности.

Я измерил локальные экспорты WebP из исходника стиля продукта размером 2400 px, чтобы установить практические цели для этой статьи. Точные байты будут меняться в зависимости от фотографии ювелирных изделий, одежды, косметики, электроники и еды, но закономерность сохраняется: изменение размера экономит больше, чем небольшие изменения ползунка качества.

Рассматривайте их как отправные точки, а не как правила. Изображение футболки на белом фоне может выглядеть чисто при размере 130 KB. Фотография часов крупным планом с матовым металлом, крошечными метками и тенями может потребовать 300 KB при той же ширине.

Если ваши изображения продуктов непоследовательны до сжатия, сначала исправьте обрезку. В руководстве по изображениям для электронной коммерции рассматривается кадрирование продукта, согласованность фона и визуальные сигналы доверия. После того как обрезка будет правильной, используйте руководство по коэффициенту сжатия изображений, чтобы записать исходные байты, конечные байты и видимый результат качества.

Как CDN от Shopify влияет на оптимизацию изображений?

CDN от Shopify помогает в доставке, но это не устраняет необходимость в корректных исходных файлах и разметке темы. Загрузка 5000 px все равно может создать медленные страницы, если тема запрашивает варианты с избыточным размером или опускает адаптивные выборы srcset.

Официальная документация Shopify по Liquid для image_url filter показывает, что темы могут запрашивать преобразованные ширины и высоты изображений. Это рычаг, который следует использовать, когда карточке коллекции нужно изображение только 600 px, но она получает гораздо более крупный ресурс.

В справке Shopify также документируются поддерживаемые типы медиапродуктов, включая изображения, видео, 3D-модели и размещенное видео в product media types. Проверьте текущую документацию Shopify перед созданием процесса массового импорта, потому что лимиты медиа и поддерживаемые форматы могут меняться.

Используйте этот порядок со стороны темы:

1. Сохраняйте оригинальную фотографию продукта чистой и несжатой в вашей рабочей папке.
2. Загрузите разумный мастер на Shopify, а не повторно экспортированный из другого инструмента.
3. В теме запросите ширину, которая фактически нужна каждой раскладке.
4. Добавьте атрибуты ширины и высоты, чтобы макет не смещался.
5. Создайте srcset с полезными шагами ширины для мобильных устройств и настольных компьютеров.
6. Позвольте изображениям товарной сетки ниже линии сгиба загружаться лениво (lazy-load).
7. Оставьте первое видимое изображение продукта или героя готовым к немедленной загрузке (eager), если оно, вероятно, повлияет на LCP.
8. Проверьте, что окончательный URL CDN возвращает HTTP 200.

CDN — это часть ответа, а не весь ответ. Если покупатель открывает страницу продукта, и первое изображение приходит с опозданием, магазин все равно кажется медленным, даже если файл поступает из быстрого периферийного местоположения (edge location).

Нужно ли загружать WebP в Shopify или позволить теме это делать?

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

Для большинства магазинов практическое решение определяется ролью изображения:

Документация Google по SEO изображений рекомендует использовать поддерживаемые форматы изображений, описательный alt text и сканируемые элементы изображений в Google Images best practices. Это важно для магазинов Shopify, потому что изображения продуктов являются как активами скорости, так и поисковыми активами.

Если вы решаете между современными форматами, сравнивайте визуальное качество, а не числовые значения ползунков. Качество WebP 82 и качество AVIF 55 — это не эквивалентные настройки. Сравнение AVIF vs WebP объясняет, в какой области превосходит каждый формат, а где решение меняется из-за совместимости или времени кодирования.

Что нужно проверить перед заменой живых изображений продуктов?

Не оптимизируйте весь каталог наугад. Сначала выберите 20 репрезентативных изображений: яркие снимки продуктов, темные снимки продуктов, детали крупным планом, фотографии моделей, ресурсы с прозрачным фоном и изображения с этикетками. Скомпрессируйте их, просмотрите в реальной теме, а затем примените настройки к остальной партии.

Выполните эту визуальную проверку, прежде чем что-либо перезаписывать:

1. Откройте оригинальное и оптимизированное изображение в размере, который видят покупатели.
2. Проверьте края продукта, текстуру ткани, тона кожи, тени и этикетки.
3. При необходимости используйте зум для изображения продукта (если ваша тема это поддерживает).
4. Убедитесь, что прозрачные края не захватывают лишних деталей.
5. Проверяйте в первую очередь на мобильных устройствах, особенно на странице описания продукта.
6. Прочитайте alt-текст так, как будто изображение не загрузилось.
7. Подтвердите, что URL изображения стабилен и возвращает HTTP 200.
8. Сохраните оригинальный мастер-файл вне Shopify на случай, если потребуется повторный экспорт.

Для пакетной обработки сначала изменяйте размер, а затем сжимайте. В руководство по пакетному изменению размера указан более безопасный порядок для папок изображений продуктов, а полный контрольный список оптимизации изображений полезен в качестве финального прохода перед публикацией.

Как изображения Shopify влияют на Core Web Vitals?

Изображения часто влияют на Largest Contentful Paint, потому что первая видимая фотография продукта или главный баннер главной страницы обычно является самым крупным визуальным элементом выше сгиба. Сжатие этого изображения помогает, но важны также обнаружение и приоритет.

Руководство web.dev по оптимизации Largest Contentful Paint рекомендует сделать вероятный ресурс LCP доступным для обнаружения на раннем этапе и использовать подсказки приоритета там, где это уместно. В терминах Shopify это означает, что первая фотография продукта не должна быть скрыта за client-side JavaScript, загружаться только после инициализации приложения или рассматриваться как миниатюра ниже сгиба.

Используйте эту таблицу Core Web Vitals при проверке темы:

Приложения могут усложнить ситуацию. Виджеты обзора, слайдеры рекомендаций и конструкторы страниц иногда внедряют изображения за пределами обычного компонента изображений темы. Проверяйте панель сети после загрузки страницы, а не только шаблон Liquid.

Практичный рабочий процесс изображений для Shopify

Используйте одну и ту же последовательность каждый раз, когда добавляете продукты или обновляете коллекцию. Последовательность важна больше, чем погоня за одним идеальным числом качества.

1. Сохраните нетронутые мастер-файлы в папке вне Shopify.
2. Обрежьте каждый продукт согласно согласованному кадрированию магазина.
3. Экспортируйте тестовый набор в ширине, соответствующей реальному витринному фасаду.
4. Попробуйте WebP q85, q82 и q78 для фотографий продуктов.
5. Сравните на реальной странице товара (PDP) и в сетке.
6. Выберите самую маленькую версию, которая все еще сохраняет детали продукта.
7. Загрузите или подключите оптимизированный рабочий процесс изображений.
8. Обновите ширины image_url темы, если страница все еще запрашивает файлы с избыточной шириной.
9. Проверьте LCP, смещение макета и загрузку страницы коллекции.
10. Зафиксируйте настройки для следующей партии продуктов.

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

Для магазинов со строгими целями по размеру файлов используйте сжатие изображений без потери качества в качестве дополнительного рабочего процесса. Ключ заключается в том, чтобы сделать сжатие повторяющимся этапом публикации, а не разовой чисткой после того, как магазин уже работает медленно.