Размеры фото товара в Shopify: что реально работает

Фото товаров в Shopify проваливаются в одну из двух сторон. Либо они слишком маленькие — и зум превращается в кашу, стоит покупателю рассмотреть шов или закрепку камня. Либо они гигантские, прямо с камеры, — и страница еле ползёт на телефоне, куда приходит большая часть трафика. Админка молча принимает и то, и другое.

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

Начните с 2048 x 2048 — и на этом остановитесь

Рекомендация самого Shopify: для квадратных фото товара обычно лучше всего отображается 2048 x 2048 px. Жёсткие лимиты стоят заметно выше — изображение товара или коллекции должно весить меньше 20 MB и может доходить до 5000 x 5000 px, то есть 25 мегапикселей.

Эти потолки — не цель. В Dawn встроенная галерея товара никогда не просит у CDN ничего шире 1946 px, а даже лайтбокс с зумом перестаёт называть размеры выше 4096 px. От мастер-файла на 5000 px вы получите в основном долгую загрузку и медленные правки по дороге. Для основной галереи держитесь квадрата 2048 px. Из форматов загрузки поддерживаются PNG, JPEG и WebP — так что отдавайте Shopify сжатый файл, а не TIFF на 6 MB.

Квадрат или вертикаль: выберите одно соотношение и держитесь его

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

Так что решите один раз. Квадрат (1:1) — самый безопасный вариант по умолчанию, он хорошо перестраивается на узких экранах. Вертикальные соотношения вроде 4:5 или 2:3 подходят одежде и высоким бутылкам: они занимают больше вертикали на мобильном. Чего делать нельзя — так это гонять оба внутри одной коллекции.

Проще всего добиться этого так: вырежьте товар и соберите кадр заново сами. Загрузите фото на remover.bg, уберите фон и замените его тем же сплошным белым или фирменным цветом, что и во всех остальных карточках. Затем приведите результат к выбранной рамке в том экспортном инструменте, которым и так пользуетесь, — чтобы кружка в руке и пальто в полный рост легли в одинаковые размеры. Та же вырезка закрывает и более строгие правила маркетплейсов — см. требования Amazon к фото на белом фоне, — а можно оставить её на прозрачности и собрать композицию позже: когда правильный результат — PNG с прозрачным фоном.

CDN Shopify меняет размер, но исходник за вас не починит

Темы запрашивают изображения через фильтры Liquid image_url и image_tag, а те собирают srcset — чтобы CDN отдал файл нужного размера и в нужном формате под каждое устройство. Именно поэтому грамотно собранная тема никогда не отправит ваш файл на 2048 px на телефон шириной 390 px.

Две вещи этим не закрываются. Выбор формата при загрузке всё ещё важен: экспорт в WebP держит файлы лёгкими ещё до того, как они доедут до CDN, а Shopify принимает WebP без конвертации — ровно так же, как remover.bg работает с WebP от начала до конца. И для сотен SKU не существует кнопки «перетащите папку»: эта работа — для скрипта поверх API для удаления фона, который запускается вместе с импортом CSV.

Зум помогает, только когда пиксели действительно есть

Shopify пишет, что для нормальной работы зума изображение должно быть больше 800 x 800 px. В Dawn настройка зума в шаблоне товара предлагает клик и наведение, открытие лайтбокса — или полное отключение зума.

Включайте зум там, где фактура и есть аргумент к покупке: трикотаж, фактура кожи, гравировка, грани камня, дерево. Выключайте на плоской графике и мелких иконках — там зум только рекламирует артефакты сжатия. К краям зум тоже беспощаден: меховая опушка, выбившиеся волосы и тонкие ремешки показывают каждую ошибку — вот где чистая вырезка отрабатывает своё.

Изображения вариантов и порядок медиа

Каждому варианту можно назначить ровно одно изображение — именно изображение, не видео и не 3D-модель, — и оно становится превью, когда покупатель выбирает эту опцию.

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

Alt-текст: разрешено 512 символов, хватит 125

Shopify ограничивает alt-текст 512 символами и рекомендует укладываться в 125. Это рекомендация по читаемости, а не лимит скринридера: длинный alt-текст утомительно слушать, потому что на слух его не пробежишь глазами. Описывайте кадр вместе с вариантом. «Тёмно-синяя льняная рубашка, вид спереди, застёгнута» лучше, чем «рубашка». Обойдитесь без «на фото» и без перечня ключевых слов. Alt-текст правится массово через загрузку CSV — не обязательно ходить по товарам поштучно.

Короткий чек-лист перед загрузкой

Прежде чем партия уйдёт в Shopify: экспортируйте квадрат 2048 px, если только вы не выбрали вертикаль, держитесь с запасом ниже потолка в 20 MB, используйте одну обработку фона на всю коллекцию, назначьте по одному изображению на вариант и выстройте вокруг него галерею, а alt-текст держите короче 125 символов. Ничего гламурного в этом нет — и всё это вылезает на странице коллекции ровно в ту секунду, когда вы ошиблись.