Rozmiary obrazów Shopify: Znaczenie wagi
Shopify pozwala na 20 MB na obraz. To jest limit, a nie cel. Oto rozmiar, którego naprawdę potrzebuje Twój sklep.
Używaj rozdzielczości 2048 na 2048 pikseli jako wzorca w Shopify i utrzymuj każdy dostarczany plik poniżej 500 KB. Shopify zezwala na obrazy o rozmiarze do 20 MB i kwadraty o boku 4472 pikseli, ale te liczby opisują to, co platforma toleruje, a nie to, czego potrzebuje szybki sklep.
Wartość 20 MB to liczba najczęściej cytowana w poradnikach i jest to zły punkt odniesienia do projektowania. To, na co Shopify pozwala, a to, co nagradza, to dwie różne rzeczy. Strona produktu zawierająca 8 obrazów po 3 MB każdy to strona o rozmiarze 24 MB, a klienci korzystający z urządzeń mobilnych opuszczą ją, zanim skończy się ładować.
Rozmiary obrazów Shopify według umiejscowienia
Zdjęcia produktów powinny być kwadratowe i mieć rozmiar 2048 pikseli, podczas gdy banery, kafelki kolekcji i logo wymagają własnych wymiarów. Używanie jednego rozmiaru wszędzie powoduje rozciągnięcie banerów i przycięcie obrazów kolekcji.
| Umiejscowienie | Zalecane piksele | Docelowy rozmiar pliku | Uwagi |
|---|---|---|---|
| Zdjęcie produktu | 2048 x 2048 | Poniżej 300 KB | Kwadrat utrzymuje porządek w siatce |
| Kafelek kolekcji | 1200 x 1200 | Poniżej 200 KB | Przycinane do kwadratu przez większość szablonów |
| Baner na stronie głównej | 1920 x 1080 | Poniżej 400 KB | Największy element renderowania treści (LCP) |
| Obraz w pokazie slajdów | 1920 x 800 | Poniżej 350 KB | Przetestuj na telefonie, krawędzie są przycinane |
| Logo | 500 x 250 | Poniżej 50 KB | PNG, jeśli wymagana jest przezroczystość |
| Favicon | 96 x 96 | Poniżej 10 KB | Tylko PNG |
Szablony przycinają obrazy w różny sposób, a baner, który wygląda poprawnie na podglądzie na komputerze, jest często ucinany w połowie na telefonie. Zachowaj najważniejszą część baneru w środkowych 60 procentach, aby żaden szablon nie mógł jej odciąć.
Dlaczego 500 KB to liczba, która ma znaczenie
Waga strony decyduje o tym, jak szybko ładuje się sklep, a obrazy stanowią większość tej wagi na typowej stronie produktu. Strona o łącznej wadze poniżej 2 MB ładuje się komfortowo na danych mobilnych, podczas gdy strona o wadze 24 MB już nie.
Klienci korzystający z telefonów stanowią większość ruchu w większości sklepów, a połączenia mobilne różnią się znacznie bardziej niż biurowe łącza szerokopasmowe. Każda sekunda ładowania kosztuje konwersje, co sprawia, że waga obrazu jest kwestią przychodów, a nie techniczną. Zmniejszenie 8 zdjęć produktów z 3 MB do 300 KB usuwa 21 MB ze strony i nie zmienia niczego, co klient może zobaczyć.
Czy Shopify kompresuje obrazy za Ciebie
Shopify serwuje warianty o zmienionym rozmiarze za pośrednictwem swojej sieci dostarczania treści (CDN) i automatycznie konwertuje je do formatu WebP dla obsługujących go przeglądarek. Platforma radzi sobie z tym całkiem dobrze i działa na wszystkim, co prześlesz.
Ten ostatni punkt to ograniczenie. Shopify generuje mniejsze warianty z Twojego oryginału, więc słabo skompresowany plik o rozmiarze 5 MB da większe warianty niż dobrze przygotowany plik o rozmiarze 400 KB. Kompresja przed przesłaniem zmniejsza również zużycie własnej przestrzeni dyskowej i znacznie przyspiesza masowy import, ponieważ import 500 produktów przesyła 200 MB zamiast 2,5 GB.
Jak przygotować obrazy dla Shopify
Aby stworzyć szybką stronę produktu, wykonaj te 6 kroków.
- Wyeksportuj kwadratowy plik wzorcowy o wymiarach 2048 na 2048 pikseli z edytora zdjęć.
- Zmień rozmiar każdego baneru lub obrazu lifestylowego do jego rzeczywistej szerokości wyświetlania, podwojonej dla ekranów o wysokiej gęstości pikseli.
- Konwertuj zdjęcia do formatu WebP lub zachowaj JPG, jeśli wymaga tego Twój proces pracy, ponieważ Shopify i tak dokona konwersji.
- Skompresuj do docelowego rozmiaru, używając 300 KB dla zdjęć produktów i 400 KB dla banerów.
- Nazwij pliki według kodu produktu i widoku, aby masowy import CSV przypisał obrazy do właściwych produktów.
- Prześlij i sprawdź stronę produktu na telefonie, a nie tylko na podglądzie na komputerze.
WebP na Shopify
Shopify od lat natywnie obsługuje format WebP i automatycznie konwertuje przesłane pliki JPG i PNG dla przeglądarek, które go obsługują. Bezpośrednie przesyłanie plików WebP jest akceptowane i daje Ci kontrolę nad kompresją, zamiast pozostawiać ją platformie.
WebP osiąga taką samą jakość wizualną jak JPG przy rozmiarach plików mniejszych o 25 do 35 procent, co jest bardzo korzystne na stronie zawierającej 8 zdjęć. Jedynym przypadkiem, którego należy unikać, jest przesyłanie plików WebP, gdy plik będzie później pobierany przez dostawcę lub wysyłany do drukarni, ponieważ te miejsca docelowe nadal oczekują formatu JPG.
Naprawianie wolnej strony produktu
Zacznij od największego obrazu na stronie, ponieważ największy pojedynczy plik zazwyczaj odpowiada za większość opóźnienia. W sklepie Shopify jest to zwykle baner na stronie głównej lub pierwsze zdjęcie produktu.
- Zmień rozmiar przed kompresją. Baner o szerokości 4000 pikseli w miejscu na 1920 pikseli marnuje 75 procent swoich danych.
- Zmniejsz liczbę obrazów widocznych bez przewijania. Galeria składająca się z 12 obrazów ładujących się jednocześnie opóźnia wszystko inne.
- Upewnij się, że leniwe ładowanie (lazy loading) jest włączone dla obrazów poniżej linii przewijania, co większość nowoczesnych szablonów obsługuje domyślnie.
- Zastąp animowane pliki GIF wideo, ponieważ krótki plik GIF często waży więcej niż cała reszta strony.
- Zrób audyt aplikacji. Widgety opinii, wyskakujące okienka i odznaki zaufania często ładują własne obrazy i skrypty.
Tekst alternatywny i nazwy plików obrazów
Pisz tekst alternatywny opisujący produkt dla klientów korzystających z czytników ekranu i nazywaj pliki zgodnie z produktem, a nie aparatem. Plik o nazwie IMG_4821.jpg nic nie mówi wyszukiwarkom ani klientom.
Użyj schematu takiego jak granatowa-lniana-koszula-przod.jpg, który pozostaje czytelny przy masowym imporcie, sortuje się przewidywalnie w folderze i opisuje obraz w wynikach wyszukiwania. Tekst alternatywny powinien mówić, co przedstawia zdjęcie, w tym kolor, materiał i widok, bez powtarzania słowo w słowo tytułu produktu. Oba pola zajmują sekundy na produkt, a poprawiają widoczność sklepu w wyszukiwarce grafiki.
Testowanie zmian przed ich wdrożeniem
Najpierw przygotuj 5 produktów, opublikuj je i sprawdź strony na prawdziwym telefonie przed uruchomieniem całego katalogu. Błąd w ustawieniach zastosowany do 500 produktów kosztuje znacznie więcej czasu na cofnięcie niż zapobieganie mu.
Sprawdź 3 rzeczy na produktach testowych. Upewnij się, że obrazy wyglądają ostro przy pełnym przybliżeniu, ponieważ klienci intensywnie korzystają z zoomu przy odzieży i biżuterii. Upewnij się, że siatka kolekcji pokazuje spójne przycięcia. Potwierdź, że strona ładuje się szybko na danych mobilnych, a nie na biurowym łączu szerokopasmowym. Dopiero wtedy zastosuj te same ustawienia do całej reszty.
Aplikacje do obrazów kontra robienie tego przed przesłaniem
Aplikacje do kompresji pobierają miesięczne opłaty za rozwiązanie problemu, który możesz rozwiązać raz przed przesłaniem. Aplikacje są przydatne, gdy sklep stale otrzymuje nowe obrazy od wielu osób i nikt nie kontroluje tego, co jest przesyłane.
Sklep ze stabilnym katalogiem i jedną osobą zarządzającą obrazami nie potrzebuje cyklicznych opłat. Skompresowanie biblioteki raz i kompresowanie nowych zdjęć w miarę ich pojawiania się daje ten sam rezultat. Przemyśl to ponownie, gdy katalog rozrośnie się powyżej tego, co możesz przetworzyć ręcznie, lub gdy kilku pracowników przesyła obrazy bez przestrzegania specyfikacji.
Typowe błędy dotyczące obrazów w Shopify
Przesyłanie zdjęć bezpośrednio z aparatu to najkosztowniejszy błąd, ponieważ 24-megapikselowe zdjęcie zawiera 10 razy więcej danych, niż sklep jest w stanie wyświetlić. Platforma akceptuje plik, a strona za to płaci.
Regularnie pojawiają się dwa inne błędy. Mieszanie kształtów obrazów w kolekcji tworzy nierówną siatkę, ponieważ szablony przycinają do kwadratu, a zdjęcie portretowe traci górę i dół. Używanie formatu PNG do zdjęć produktów zwiększa rozmiar plików od 3 do 5 razy bez widocznych korzyści, ponieważ PNG zapisuje dokładnie każdy piksel, a zdjęcie nie ma jednolitych obszarów, które można by wykorzystać.
Utrzymanie spójnego katalogu
Przetwarzaj cały katalog w jednej partii, aby każde zdjęcie produktu miało te same wymiary, kompresję i kadrowanie. Klienci porównujący produkty zauważają niespójność, nawet jeśli nie potrafią jej nazwać.
Spójność pomaga również siatce kolekcji, gdzie obrazy o pasującym kształcie i jasności są odbierane jako zaprojektowana strona, a nie przypadkowo złożona. Ustaw wymiary i docelowy rozmiar raz, a następnie zastosuj je do każdego pliku, zamiast dostosowywać każdy produkt z osobna.
Przetwarzanie katalogu w jednym przebiegu
Wrzuć do 500 obrazów naraz lub przeciągnij archiwum ZIP bezpośrednio od fotografa, a każdy plik wróci z odpowiednio zmienionym rozmiarem i skompresowany do tej samej specyfikacji. Katalog, którego przygotowanie w programie komputerowym zajmowało całe popołudnie, jest gotowy w kilka minut.
Wszystko działa w Twojej przeglądarce na Twoim własnym procesorze, więc nieopublikowane produkty, zdjęcia z kampanii sezonowych i zdjęcia od dostawców nigdy nie trafiają na serwer. Dla sklepu przygotowującego premierę objętą embargiem, utrzymanie plików lokalnie to różnica między kontrolowanym ogłoszeniem a wyciekiem, i nie kosztuje to nic dodatkowo.