Rozmiary zdjęć produktów na Shopify: zacznij od 2048 px

Zdjęcia produktów na Shopify psują się na dwa sposoby. Albo są za małe i widok przybliżenia zamienia się w papkę, gdy klient chce obejrzeć szew albo oprawę kamienia. Albo lecą prosto z aparatu w gigantycznym rozmiarze i strona muli na telefonie — czyli dokładnie tam, gdzie ląduje większość Twojego ruchu. Panel administracyjny przyjmie jedno i drugie bez słowa ostrzeżenia.

Shopify robi za Ciebie więcej, niż podejrzewa większość sprzedawców: sam generuje rozmiary każdego obrazu pod różne miejsca w sklepie, a jego CDN podaje nowoczesny format — WebP albo AVIF — wszędzie tam, gdzie przeglądarka to obsłuży. Czego nie zrobi: nie naprawi niespójnych proporcji obrazu, nie zgadnie, które zdjęcie należy do którego wariantu, ani nie uratuje poszarpanego wycinka. Reszta jest po Twojej stronie.

Zaczynaj od 2048 x 2048 i na tym poprzestań

Wytyczna samego Shopify brzmi: kwadratowe zdjęcia produktów wyświetlają się zwykle najlepiej w 2048 x 2048 px. Twarde limity leżą dużo wyżej — zdjęcie produktu lub kolekcji musi ważyć poniżej 20 MB i może sięgnąć 5000 x 5000 px, czyli 25 megapikseli.

Te sufity nie są celem. W motywie Dawn galeria produktu wbudowana w stronę nigdy nie prosi CDN-a o nic szerszego niż 1946 px, a nawet lightbox z przybliżeniem przestaje wymieniać rozmiary powyżej 4096 px. Oryginał 5000 px kupuje Ci głównie wolniejsze przesyłanie i wolniejszą edycję po drodze. Do głównej galerii trzymaj się kwadratu 2048 px. Wśród obsługiwanych formatów przesyłania są PNG, JPEG i WebP, więc podaj Shopify skompresowany plik zamiast 6 MB TIFF-a.

Kwadrat albo pion: wybierz jedne proporcje i się ich trzymaj

Siatki kolekcji to miejsce, w którym pomieszane proporcje obrazu rzucają się w oczy — i dlatego właśnie Shopify zaleca jednolite proporcje we wszystkich zdjęciach wyróżniających. Motywy takie jak Dawn pozwalają albo dopasować kadr do każdego obrazu, albo zablokować wszystko w stałych proporcjach, a obie opcje karzą za niekonsekwencję: dopasowanie daje poszarpaną siatkę, blokada przycina górę butelki albo zostawia martwą przestrzeń wokół pierścionka.

Zdecyduj więc raz. Kwadrat (1:1) to najbezpieczniejszy domyślny wybór i dobrze układa się na wąskich ekranach. Proporcje pionowe, takie jak 4:5 czy 2:3, pasują do odzieży i wysokich butelek, bo wypełniają więcej pionu na telefonie. Czego zrobić nie możesz, to używać obu w jednej kolekcji.

Wymuś to, wycinając produkt i budując kadr od nowa samodzielnie. Prześlij zdjęcie do remover.bg, usuń tło i zastąp je tą samą jednolitą bielą albo kolorem marki, co w każdej innej ofercie. Potem przeskaluj wynik do wybranego kadru w dowolnym narzędziu eksportu, którego już używasz — dzięki temu trzymany w dłoni kubek i płaszcz do kostek wylądują na identycznych wymiarach. Ten sam wycinek nadaje się też pod ostrzejsze zasady marketplace'ów, zebrane we wpisie o wymaganiach Amazona dla zdjęć produktów, albo możesz zostawić go z przezroczystym tłem i złożyć kompozycję później — zobacz, kiedy właściwym wynikiem jest przezroczysty PNG.

CDN Shopify przeskaluje obraz, ale nie naprawi źródła

Motywy pobierają obrazy przez filtry image_url i image_tag w Liquidzie, a te budują srcset, dzięki któremu CDN podaje każdemu urządzeniu plik we właściwym rozmiarze i właściwym formacie. Dlatego dobrze zbudowany motyw nigdy nie wysyła Twojego pliku 2048 px na telefon o szerokości 390 px.

Dwie rzeczy zostają jednak poza tym mechanizmem. Wybór formatu przy przesyłaniu wciąż ma znaczenie: eksport do WebP trzyma rozmiar plików w ryzach, zanim jeszcze trafią do CDN-a, a Shopify przyjmuje WebP bez konwersji — dokładnie tak, jak remover.bg obsługuje WebP od początku do końca. Przy setkach SKU nie ma też skrótu w stylu „przeciągnij folder”; ta robota należy do skryptu opartego na API do usuwania tła, uruchamianego razem z importem CSV.

Przybliżanie pomaga tylko wtedy, gdy piksele naprawdę są

Shopify podaje, że obraz musi mieć więcej niż 800 x 800 px, żeby przybliżanie działało jak należy. W motywie Dawn ustawienie przybliżania w szablonie produktu daje do wyboru kliknięcie i najechanie, otwarcie lightboxa albo całkowitą rezygnację z przybliżania.

Włączaj przybliżanie tam, gdzie argumentem sprzedażowym jest faktura materiału: dzianiny, ziarno skóry, grawer, szlif kamienia, drewno. Wyłącz je przy płaskich grafikach i małych ikonach, gdzie przybliżanie reklamuje wyłącznie artefakty kompresji. Przybliżanie jest też bezlitosne dla krawędzi — futrzane wykończenia, luźne włosy i cienkie paski pokazują każdy błąd, i właśnie tu czysty wycinek zarabia na siebie.

Zdjęcia wariantów i kolejność multimediów

Do każdego wariantu można przypisać dokładnie jedno zdjęcie — wyłącznie obraz, nie wideo ani model 3D — i to ono staje się podglądem, gdy klient wybierze daną opcję.

Ponieważ jedno zdjęcie na wariant rzadko wystarcza, obudowuj je galerią. Dodaj wszystkie ujęcia do multimediów produktu, ułóż je tak, żeby powiązane kadry sąsiadowały ze sobą, i na pierwszym miejscu postaw najmocniejszy obraz: pierwszy element multimediów napędza kartę produktu i widok domyślny.

Tekst alternatywny: wolno 512 znaków, 125 w zupełności wystarczy

Shopify ogranicza tekst alternatywny do 512 znaków i zaleca nie więcej niż 125. To wytyczna czytelności, nie limit czytnika ekranu: długiego tekstu alternatywnego męczy się słuchać, bo słuchacz nie ma jak przelecieć go wzrokiem. Opisz kadr, razem z wariantem. „Granatowa lniana koszula, widok z przodu, zapięta” bije „koszula”. Odpuść „zdjęcie przedstawiające” i odpuść listy słów kluczowych. Tekst alternatywny da się edytować hurtowo przez przesłanie pliku CSV, zamiast produkt po produkcie.

Krótka checklista przed przesłaniem

Zanim partia trafi do Shopify: eksportuj kwadrat 2048 px, chyba że Twoim formatem jest pion, trzymaj się z zapasem poniżej limitu 20 MB, stosuj to samo tło w całej kolekcji, przypisz po jednym zdjęciu do każdego wariantu i ułóż wokół niego galerię, a tekst alternatywny utrzymaj poniżej 125 znaków. Nic z tego nie jest efektowne, a wszystko widać na stronie kolekcji w chwili, gdy się pomylisz.