Shopify jest bardziej wyrozumiały co do wymiarów obrazów niż marketplace pokroju Amazona — chętnie wyświetli niemal wszystko. Ta elastyczność to pułapka. Wgraj ogromne, niespójne pliki, a Twój motyw wyrenderuje wolną, niedopasowaną siatkę, gdzie jedne produkty wyglądają ostro, a inne wyglądają przycięte albo maleńkie. Ustawienie właściwych rozmiarów z góry sprawia, że cały sklep wydaje się profesjonalny i ładuje się szybko.
Rozmiary i zachowanie motywów ewoluują, więc traktuj to jako częste, szeroko używane zalecenia i potwierdź z dokumentacją swojego aktualnego motywu.
Zalecane rozmiary
| Typ obrazu | Częste zalecenie | Proporcje |
|---|---|---|
| Zdjęcia produktów | 2048 × 2048 px | 1:1 (kwadrat) |
| Kwadrat najbezpieczniejszy ogólnie | do maks. 4472 × 4472 px | 1:1 |
| Kolekcja / miniatury | ~1024 × 1024 px | 1:1 |
| Pokaz slajdów / baner główny | ~1600 px szerokości (albo szerzej) | 16:9 albo ustawione przez motyw |
| Maks. rozmiar pliku | 20 MB na obraz (celuj znacznie niżej) | — |
Dwie rzeczy mają większe znaczenie niż jakakolwiek pojedyncza liczba.
Wybierz jedne proporcje i się ich trzymaj. Motywy Shopify wyglądają najlepiej, gdy każde zdjęcie produktu ma ten sam kształt. Kwadrat (1:1) to najpewniejszy wybór, bo pasuje do siatki niemal każdego motywu bez niezręcznego kadrowania. Jeśli zmieszasz kwadrat, portret i krajobraz, Twoja siatka będzie wyglądać poszarpanie.
2048 × 2048 to złoty środek dla produktów. Jest wystarczająco wyrazisty dla wbudowanego zoomu Shopify na komputerze, czysto zmniejsza się do miniatur i mobile, i zostaje spokojnie poniżej sufitu rozmiaru pliku. Większy niż to głównie tylko dodaje wagi.
Ujednolić cały katalog naraz
Zmiana rozmiaru dziesiątek zdjęć produktów ręcznie to miejsce, gdzie znika popołudnie. Nie rób tego. Narzędzie do zmiany rozmiaru zdjęć e-commerce ma preset Shopify, który wypuszcza kwadraty 2048 × 2048 na białym tle, z każdym produktem automatycznie wyśrodkowanym i marginesem, który możesz dostosować, żeby nic nie dotykało krawędzi. Wrzuć folder, dostań z powrotem ZIP — każdy obraz tego samego rozmiaru, tego samego kształtu, tego samego kadrowania.
Ta spójność jest tym, co sprawia, że siatka Shopify wygląda na zaprojektowaną, a nie poskładaną.
Potem utnij wagę plików
Poprawne wymiary rozwiązują układ. Waga plików rozwiązuje szybkość — a szybkość to pieniądze na Shopify, gdzie wolne strony po cichu kosztują konwersje i szkodzą Twojej pozycji w wyszukiwaniu.
Zdjęcie 2048 px prosto z aparatu może mieć kilka megabajtów. To znacznie więcej, niż strona potrzebuje. Przepuść każdy obraz przez narzędzie do kompresji: dla zdjęć jakość 75–85 zwykle tnie plik o 40–70% bez widocznej różnicy; pliki PNG są automatycznie kwantyzowane. Kompresor nigdy nie oddaje pliku większego niż ten, który mu dałeś, więc możesz bezpiecznie przetworzyć wsadowo cały sklep.
Kolejność, która działa dobrze:
- Zmień rozmiar do 2048 × 2048 presetem Shopify.
- Skompresuj przy jakości 75–85 (albo pozwól zadziałać kwantyzacji PNG).
- Wgraj — ten sam kształt, małe pliki, szybka siatka.
WebP, JPG czy PNG?
Shopify automatycznie podaje WebP przeglądarkom, które go wspierają, więc zwykle nie musisz sam konwertować formatów. Wgrywaj czyste pliki JPG do zdjęć, a PNG tylko do grafik, które potrzebują przezroczystości albo wyrazistego tekstu. Pozwól platformie zająć się dostarczaniem formatu; Twoim zadaniem jest wysłać pliki źródłowe o właściwym rozmiarze i dobrze skompresowane.
Wszystko zostaje na Twojej maszynie
Oba narzędzia działają w całości w Twojej przeglądarce dzięki Canvas i WebAssembly — bez przesyłania, bez konta, bez znaku wodnego. Twoje zdjęcia produktów nigdy nie dotykają serwera. Po pierwszej wizycie narzędzia są w cache i działają dalej offline, więc możesz przygotować pełny katalog w pociągu i wgrać go, gdy wrócisz online.
Zrób z tego kwadrat, ustaw rozmiar na 2048, skompresuj, a Twój sklep Shopify ładuje się szybko i wygląda jak jeden spójny sklep zamiast stosu przypadkowych plików.