Розміри фото товарів для Shopify: чому 2048 px достатньо

Зображення товарів у 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 символів. Нічого гламурного в цьому немає — і все це видно на сторінці колекції тієї ж миті, коли ви зробили щось не так.