Размери на изображенията в Shopify

Използвайте 2048 на 2048 пиксела като ваш основен размер в Shopify и поддържайте всеки качен файл под 500 KB. Shopify позволява изображения до 20 MB и 4472 пиксела квадрат, но тези числа описват това, което платформата толерира, а не това, от което се нуждае един бърз онлайн магазин.

Цифрата от 20 MB е числото, което повечето ръководства цитират, и е грешното, около което да проектирате. Това, което Shopify позволява, и това, което Shopify възнаграждава, са различни неща. Продуктова страница, съдържаща 8 изображения по 3 MB всяко, е страница от 24 MB, а мобилните купувачи си тръгват, преди тя да е приключила с зареждането.

Размери на изображенията в Shopify според разположението

Продуктовите изображения трябва да бъдат квадратни с размер 2048 пиксела, докато банерите, плочките за колекции и логата се нуждаят от свои собствени размери. Използването на един размер навсякъде води до разтегнати банери и изрязани изображения на колекции.

Темите изрязват изображенията по различен начин и банер, който изглежда правилно при преглед на десктоп, често е срязан през средата на телефон. Дръжте важната част от банера в централните 60 процента, така че никоя тема да не може да я изреже.

Защо 500 KB е числото, което има значение

Теглото на страницата решава колко бързо се зарежда магазинът, а изображенията съставляват по-голямата част от това тегло на типична продуктова страница. Страница под 2 MB общо се зарежда лесно на мобилни данни, докато страница от 24 MB не се зарежда.

Купувачите на телефони съставляват по-голямата част от трафика за повечето магазини, а мобилните връзки варират много повече от офисния широколентов интернет. Всяка секунда време за зареждане струва конверсии, което прави теглото на изображението въпрос на приходи, а не технически въпрос. Намаляването на 8 продуктови изображения от 3 MB на 300 KB премахва 21 MB от страницата и не променя нищо, което купувачът може да види.

Компресира ли Shopify изображенията вместо вас

Shopify предоставя преоразмерени варианти чрез своята мрежа за доставка на съдържание (CDN) и автоматично конвертира в WebP за поддържаните браузъри. Платформата върши разумна работа и работи с каквото и да качите.

Последната точка е ограничението. Shopify генерира по-малки варианти от вашия оригинал, така че лошо компресирано качване от 5 MB произвежда по-големи варианти, отколкото добре подготвено качване от 400 KB. Компресирането преди качване също така намалява собственото ви използване на хранилище и прави груповия импорт много по-бърз, тъй като импортът на 500 продукта пренася 200 MB вместо 2.5 GB.

Как да подготвите изображения за Shopify

За да създадете бърза продуктова страница, следвайте тези 6 стъпки.

1. Експортирайте квадратен оригинал с размер 2048 на 2048 пиксела от вашия фоторедактор.
2. Преоразмерете всеки банер или лайфстайл изображение до действителната му ширина на показване, удвоена за екрани с висока плътност.
3. Конвертирайте снимките в WebP или запазете JPG, ако работният ви процес зависи от това, тъй като Shopify конвертира и в двата случая.
4. Компресирайте до целеви размер, като използвате 300 KB за продуктови снимки и 400 KB за банери.
5. Именувайте файловете по продуктов код и изглед, така че груповият CSV импорт да свърже изображенията с правилните продукти.
6. Качете и проверете продуктовата страница на телефон, а не само на преглед от десктоп.

WebP в Shopify

Shopify поддържа WebP нативно от години и автоматично конвертира качените JPG и PNG файлове за браузъри, които го поддържат. Директното качване на WebP се приема и ви дава контрол над компресията, вместо да я оставяте на платформата.

WebP постига същото визуално качество като JPG при 25 до 35 процента по-малки размери на файловете, което си струва да се има предвид на страница с 8 снимки. Единственият случай, който трябва да се избягва, е качването на WebP, когато файлът по-късно ще бъде изтеглен от доставчик или изпратен в печатница, тъй като тези дестинации все още очакват JPG.

Коригиране на бавна продуктова страница

Започнете с най-голямото изображение на страницата, защото най-големият единичен файл обикновено е причина за по-голямата част от забавянето. В онлайн магазин на Shopify това обикновено е банерът на началната страница или първата продуктова снимка.

• Преоразмерете преди компресиране. Банер от 4000 пиксела в слот от 1920 пиксела губи 75 процента от своите данни.
• Намалете броя на изображенията над сгъвката (above the fold). Галерия от 12 изображения, зареждащи се наведнъж, забавя всичко останало.
• Проверете дали мързеливото зареждане (lazy loading) е включено за изображения под сгъвката, с което повечето модерни теми се справят по подразбиране.
• Заменете анимираните GIF файлове с видео, тъй като краткият GIF често тежи повече от цялата останала част от страницата.
• Одитирайте приложенията. Джаджите за отзиви, изскачащите прозорци и значките за доверие често зареждат свои собствени изображения и скриптове.

Алтернативен текст (alt text) и имена на файлове с изображения

Напишете алтернативен текст, описващ продукта за купувачи, използващи екранни четци, и именувайте файловете на името на продукта, а не на фотоапарата. Файл с име IMG_4821.jpg не казва нищо на търсачките и купувачите.

Използвайте модел като navy-linen-shirt-front.jpg, който остава четим при групов импорт, сортира се предвидимо в папка и описва изображението в резултатите от търсенето. Алтернативният текст трябва да казва какво показва снимката, включително цвят, материал и изглед, без да повтаря заглавието на продукта дума по дума. И двете полета отнемат секунди на продукт и подобряват начина, по който магазинът се появява в търсенето на изображения.

Тестване на промените преди внедряването им

Обработете първо 5 продукта, публикувайте ги и проверете страниците на реален телефон, преди да пуснете целия каталог. Грешка в настройките, приложена към 500 продукта, отнема много повече време за отмяна, отколкото за предотвратяване.

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

Приложения за изображения срещу обработка преди качване

Приложенията за компресиране таксуват месечно, за да решат проблем, който можете да решите веднъж преди качването. Приложенията са полезни, когато магазинът получава постоянно нови изображения от много хора и никой не контролира какво се качва.

Магазин със стабилен каталог и един човек, управляващ изображенията, няма нужда от повтаряща се такса. Компресирането на библиотеката веднъж и компресирането на новите снимки при пристигането им постига същия резултат. Преосмислете това, когато каталогът нарасне над това, което можете да обработите на ръка, или когато няколко служители качват изображения, без да следват спецификация.

Чести грешки с изображения в Shopify

Качването директно от фотоапарата е най-скъпата грешка, тъй като 24-мегапикселова снимка носи 10 пъти повече данни, отколкото един онлайн магазин може да покаже. Платформата приема файла, а страницата плаща за това.

Редовно се появяват още две грешки. Смесването на форми на изображения в една колекция създава неравна мрежа, тъй като темите изрязват до квадрат и портретната снимка губи горната и долната си част. Използването на PNG за продуктови снимки увеличава размера на файловете от 3 до 5 пъти без видима полза, тъй като PNG съхранява всеки пиксел точно, а снимката няма плоски зони, които да се използват.

Поддържане на последователен каталог

Обработете целия каталог на една партида, така че всяка продуктова снимка да споделя едни и същи размери, компресия и рамкиране. Купувачите, сравняващи продукти, забелязват несъответствието, дори когато не могат да го назоват.

Последователността също така помага на мрежата на колекцията, където изображенията с еднаква форма и яркост се възприемат като проектирана страница, а не като сглобена. Задайте размерите и целевия размер веднъж, след което ги приложете към всеки файл, вместо да коригирате всеки продукт поотделно.

Обработка на каталог на един ход

Пуснете до 500 изображения наведнъж или плъзнете ZIP архив директно от вашия фотограф, и всеки файл се връща преоразмерен и компресиран по същата спецификация. Каталог, който е отнемал цял следобед в десктоп софтуер, приключва за няколко минути.

Всичко се изпълнява във вашия браузър на вашия собствен процесор, така че непубликувани продукти, сезонни рекламни снимки и снимки от доставчици никога не достигат до сървър. За магазин, подготвящ стартиране под ембарго, запазването на файловете локално е разликата между контролирано съобщение и изтичане на информация, и това не струва нищо допълнително.