Размери на продуктови снимки в 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 компресиран файл, а не 6 MB TIFF.

Квадрат или вертикал: изберете едно съотношение и го спазвайте

Мрежите на колекциите са мястото, където смесените съотношения си личат най-силно, затова 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 знака. Нищо от това не е бляскаво, но всичко си личи на страницата на колекцията в мига, в който сгрешите.