Jak optymalizować obrazy Shopify: wymiary, formaty i kompresja

Przykład: przygotowanie głównego zdjęcia produktu

Załóżmy, że masz ostre zdjęcie 3600 × 2400 pikseli i sklep z kwadratowymi zdjęciami głównymi. Kroki pokazują sposób pracy, nie zmierzone wyniki kompresji ani obietnicę rozmiaru pobierania.

1. Wybierz kadr. Wypróbuj kwadrat 2400 × 2400 pokazujący cały produkt. Jeśli nie mieści się, zmień kompozycję zamiast obcinać ważną część.
2. Sprawdź spójność. Porównaj z dwiema istniejącymi kartami i dostosuj przestrzeń wokół produktu do podobnej skali.
3. Przygotuj odpowiedni oryginał. Porównaj kopię 2048 × 2048 z kadrem w pełnej wielkości. Zachowaj szczegóły dla widoku produktu i powiększenia. Nie powiększaj małego oryginału tylko dla tej liczby.
4. Wybierz format. Użyj wyraźnego JPG dla zdjęcia na jednolitym tle lub PNG przy potrzebnej przezroczystości. Próby kompresji twórz z dobrego oryginału.
5. Prześlij i obejrzyj. Sprawdź produkt, kolekcję i widok telefonu. Ważne krawędzie nie mogą znikać, a powiększenie powinno ujawniać użyteczne szczegóły.
6. Sprawdź dostarczaną wersję. Przy rozmyciu lub wolnej stronie obejrzyj wersję ładowaną przez motyw, zanim ponownie wyeksportujesz plik.

Gdy sposób działa na małej próbce, zastosuj go do podobnych produktów. Wyjątki sprawdzaj osobno. Błyszcząca biżuteria i zwykły karton mogą wymagać innych decyzji o jakości mimo tych samych wymiarów i kompozycji.

Co Shopify robi automatycznie?

Rozróżnij plik przesyłany do sklepu od wersji pobieranej przez przeglądarkę klienta. Zmniejszenie pierwszego z 4 MB do 1 MB nie musi zmniejszyć pobierania przez klienta w tej samej proporcji.

Shopify tworzy różne rozmiary obrazów i może dostarczać WebP lub AVIF, jeśli przeglądarka je obsługuje. Według instrukcji dotyczących obrazów motywu ręczna kompresja przed przesłaniem nie jest konieczna. Oryginał zachowuje jakość w panelu administracyjnym, a sklep może wyświetlać zoptymalizowaną wersję.

Wyraźny, dobrze skomponowany oryginał jest więc lepszy niż plik zmniejszony za wszelką cenę. Shopify nie przywróci szczegółów usuniętych przez silną kompresję. Jeśli motyw rozciąga malutką wersję ostrego zdjęcia, problem nie leży w oryginale.

Zacznij od widocznego problemu. Przy złym kadrowaniu popraw kompozycję lub ustawienia motywu. Jeśli oryginał jest rozmyty, użyj lepszego zdjęcia. Gdy wyraźny obraz ładuje się wolno, sprawdź wersję dostarczaną klientowi. Ponowna kompresja nie jest właściwym pierwszym krokiem w każdym z tych przypadków.

Dobierz wymiary do miejsca wyświetlania

Przygotuj wymiary dla największego potrzebnego widoku, nie tylko małej karty produktu. Ostra miniatura może być zbyt mała dla galerii lub powiększenia. Piksele określają szerokość i wysokość; KB lub MB oznaczają ilość danych w pliku.

Shopify dopuszcza zdjęcia produktów i kolekcji do 5000 × 5000 pikseli, czyli 25 milionów pikseli, z plikiem mniejszym niż 20 MB. Dla zdjęć kwadratowych proponuje 2048 × 2048 jako punkt wyjścia, nie obowiązek w każdym sklepie. Sprawdź wymagania dotyczące mediów produktów przed przygotowaniem dużej partii.

Limity zależą od miejsca przesyłania. Shopify w dokumentacji sekcji Pliki podaje 20 MB i 25 milionów pikseli dla obrazów; instrukcja motywu wymienia 20 milionów dla innych przesyłanych obrazów. Stosuj wskazówki i komunikat błędu konkretnego pola, zamiast zakładać jedną granicę dla całego panelu.

Zdjęcie wyświetlane na szerokości 700 pikseli może skorzystać z wersji 1400 pikseli na ekranie używającym dwóch pikseli obrazu na piksel wyświetlania. To przykład planowania, nie zasada podwajania wszystkich plików. Powiększenie może wymagać więcej szczegółów; małe karty nadal powinny otrzymywać mniejsze wersje.

Nie rób wszystkich zdjęć kwadratowych tylko dlatego, że takie karty są popularne. Wysoka butelka, ubranie i krajobraz mogą potrzebować innych kompozycji. Zachowaj wspólny kształt tam, gdzie ułatwia porównywanie produktów.

Baner 1200 × 600 ma proporcje 2:1. Plik 2400 × 1200 zachowuje kształt i oferuje więcej szczegółów na ekranach o wysokiej rozdzielczości. To przykłady, nie wymagania Shopify. Wąska, wysoka sekcja mobilna może mocno obciąć boki. Osobny obraz mobilny pomaga, jeśli motyw go obsługuje.

Wybierz JPG lub PNG zależnie od treści

Wypróbuj JPG dla zwykłych zdjęć bez przezroczystości. PNG sprawdź dla przezroczystego tła lub grafik z ostrym tekstem i cienkimi liniami, które pogarszają się w JPG. Porównuj pliki, zamiast narzucać jeden format całemu katalogowi.

Zdjęcie PNG może być dużo większe od JPG, lecz konwersja ma sens tylko przy wiernym wyglądzie produktu. Obejrzyj tkaniny, biżuterię, słoje drewna i drobne napisy. Mały plik ukrywający te szczegóły nie jest dobrym zdjęciem produktu.

Przesyłanie WebP jest opcją, nie warunkiem nowoczesnego dostarczania obrazów. Shopify może dobrać format niezależnie od przesłanego pliku. AVIF w przeglądarce również nie oznacza, że musisz przesyłać AVIF. Sprawdź formaty przyjmowane przez dane pole.

Białe tło nie jest przezroczystością: zapis do PNG nie usunie białego prostokąta już znajdującego się za produktem. Sprawdzaj przezroczyste obrazy na rzeczywistym tle strony, zwłaszcza jasne krawędzie i cienie. Nasz poradnik formatów obrazów wyjaśnia, kiedy używać poszczególnych formatów.

Zachowaj spójność zdjęć bez obcinania ważnych szczegółów

Proporcje obrazu oznaczają stosunek szerokości do wysokości. Zdjęcia 2000 × 2000 i 1000 × 1000 są kwadratowe, choć zawierają różną ilość szczegółów. Sam kształt nie wystarczy: produkt powinien zajmować podobną część każdego zdjęcia głównego.

Porównaj rząd kart kolekcji. Jeśli jeden but wypełnia kadr, a drugi ma dużo białej przestrzeni, rząd wygląda nierówno mimo tych samych wymiarów. Popraw kompozycję dla łatwiejszego porównania i zostaw miejsce na pełne krawędzie produktu.

Kadrowanie usuwa część obrazu, zmiana rozmiaru zmienia wymiary, a rozciąganie zniekształca proporcje. Użyj narzędzia kadrowania do kompozycji i narzędzia zmiany rozmiaru do proporcjonalnego zmniejszania. Rozciągnięcie butelki do kwadratu daje klientowi błędny obraz jej kształtu.

Przygotuj serię w narzędziu do zdjęć produktów: wybierz wspólny obszar roboczy i odstępy, przytnij lub przesuń każde zdjęcie, a potem porównaj serię w widoku Wszystkie obrazy. Sprawdź, czy podobne produkty zajmują zbliżoną część kadru. Wspólne wymiary nie korygują automatycznie różnic w kadrowaniu źródeł. Wyeksportuj wyraźny JPG albo PNG, gdy potrzebujesz przezroczystości, i sprawdź go w swoim szablonie. Narzędzie przygotowuje pliki; Shopify nadal odpowiada za ich dostarczanie, a szablon za sposób wyświetlania.

Zależnie od motywu Shopify pozwala ustawić punkt skupienia, aby ważna część pozostała widoczna przy kadrowaniu. Pomaga to zachować twarz lub produkt w banerze, ale nie mieści całej szerokiej kompozycji na wąskim ekranie. Sprawdź oba rozmiary ekranu.

Nagłówki promocyjne i przyciski umieszczaj, jeśli można, w polach tekstowych motywu. Tekst w obrazie banera może być za mały lub przycięty na telefonie. Prawdziwy tekst strony może się zawijać i być zaznaczany; prawdziwy przycisk działa jako link, a nie tylko jego rysunek.

Kiedy kompresja przed przesłaniem pomaga?

Pomaga, gdy oryginał jest niepotrzebnie duży, długo się przesyła lub przekracza limit. Daje mniej, jeśli plik jest już wyraźny i rozsądny, a Shopify dostarcza odpowiednią wersję. Nie obniżaj jakości tylko po to, aby każde zdjęcie zmieścić w arbitralnym celu, np. 100 KB.

Zachowaj nietkniętą kopię. Gdy wymiary są nadmierne, najpierw zmniejsz kopię, potem sprawdź kompresję. Dla małego bloku treści może to dać więcej niż wielokrotna kompresja ogromnego oryginału. Powiększanie produktu może uzasadniać większą ilość szczegółów.

Porównaj skompresowaną kopię za pomocą kompresora obrazów Pixilo. Przyjmuje do 20 JPG, PNG lub WebP naraz, maksymalnie 25 MB każdy, zachowując format i wymiary. Jego limity różnią się od Shopify. Zacznij od kilku reprezentatywnych zdjęć i obejrzyj wyniki przed resztą.

Kompresja PNG jest tu bezstratna: piksele pozostają niezmienione. Dobrze skompresowany PNG może zmniejszyć się nieznacznie. JPG i WebP mogą zmieniać drobne szczegóły, więc obejrzyj pobraną kopię. Jeśli plik nie jest mniejszy, Pixilo zachowuje oryginał.

Porównuj zdjęcia w rozmiarze widocznym dla klientów i przy dostępnym powiększeniu. Sprawdź drobne faktury, etykiety, gładkie tła i przezroczyste krawędzie. Wróć do oryginału, jeśli znikają przydatne szczegóły. Nasz poradnik optymalizacji zdjęć produktów dokładniej opisuje te kontrole.

Pisz przydatne teksty alternatywne i jasne nazwy plików

SEO obrazów zaczyna się od zdjęcia pomagającego zrozumieć produkt. Nadaj plikowi opisową nazwę przed przesłaniem, np. oliwkowy-plecak-z-plotna-widok-z-przodu.jpg. Unikaj długich list słów kluczowych. Nazwa powinna odróżniać zdjęcie od widoku z boku lub detalu.

Tekst alternatywny opisuje obraz słowami. Dla ważnej fotografii opisz widok: „Oliwkowy plecak z płótna, widok z przodu z dwiema zewnętrznymi kieszeniami”. Na zdjęciu detalu opisz detal, zamiast powtarzać opis główny. Nie dodawaj ceny, rabatu ani słowa kluczowego, którego obraz nie wyjaśnia.

Wskazówki Google dotyczące SEO obrazów zalecają opisowe nazwy i użyteczne teksty alternatywne bez upychania słów kluczowych. Otaczająca treść również dostarcza kontekstu. Nazwa to mała wskazówka, nie zamiennik pomocnej strony produktu.

Dodaj tekst alternatywny do zdjęcia produktu Shopify

1. W panelu Shopify otwórz Produkty i wybierz produkt.
2. Kliknij zdjęcie w sekcji mediów, aby otworzyć podgląd.
3. Wybierz Dodaj tekst alternatywny, wpisz krótki opis i wybierz Zapisz tekst alternatywny.
4. Powtórz dla innych przydatnych widoków, opisując zawartość każdego.

Kroki są zgodne z instrukcją Shopify dotyczącą tekstu alternatywnego produktów. Banery motywu mają osobne ustawienia. Sprawdź proponowany opis przed zatwierdzeniem: kolor, materiał i szczegóły muszą odpowiadać zdjęciu.

Opis we właściwościach pliku na komputerze nie staje się automatycznie tekstem alternatywnym. Motyw może używać obrazu na różne sposoby. Obraz dekoracyjny może wymagać pustej alternatywy, a obraz będący linkiem powinien wyjaśniać cel odnośnika.

Nasz poradnik tekstów alternatywnych i nazw plików wyjaśnia te przypadki na przykładach. Opisy wspierają dostępność i zrozumienie, ale nie gwarantują pozycji w wyszukiwarce i nie zastępują brakujących informacji o produkcie.

Sprawdź opublikowany sklep na telefonie i komputerze

Podgląd w panelu nie wystarczy. Zacznij od tych kontroli w opublikowanym sklepie; nie potrzeba narzędzi deweloperskich.

• Otwórz produkt na telefonie. Czy widać całość? Czy ważne etykiety są czytelne, a materiał rozpoznawalny?
• Sprawdź rząd kolekcji. Czy zdjęcia główne mają spójne kształty i marginesy?
• Wypróbuj galerię i powiększenie. Czy dodatkowe zdjęcia pokazują użyteczne szczegóły? Czy wybrany kolor lub wariant przedstawia właściwy produkt?
• Odśwież stronę. Czy główne zdjęcie pojawia się szybko, a tekst i przyciski pozostają w miejscu podczas ładowania?
• Powtórz na większym ekranie. Sprawdź szerokie banery i duże widoki produktów, nie tylko wąski podgląd.

Zbadaj rozmyty lub wolno ładowany obraz

Jeśli rozmycie nie znika, sprawdź, czy motyw rozciąga małą wersję. Jeśli mała karta pobiera ogromne zdjęcie, sprawdź dostępne mniejsze wersje. Obrazy responsywne pozwalają przeglądarce wybrać rozmiar odpowiedni do układu i ekranu.

Shopify w dokumentacji image_tag wyjaśnia warianty rozmiaru w kodzie motywu. W razie potrzeby poproś dewelopera o sprawdzenie żądanych wymiarów i atrybutów srcset oraz sizes. Przesyłanie osobno każdej miniatury nie rozwiązuje problemu w kodzie.

Jeśli znasz narzędzia deweloperskie przeglądarki, panel Sieć pokazuje rzeczywiste pobieranie. Możesz też przesłać stronę i obraz twórcy motywu.

1. Otwórz stronę produktu i narzędzia deweloperskie, a następnie wybierz Sieć (Network).
2. Przy otwartym panelu wyłącz pamięć podręczną przeglądarki na czas testu i odśwież. Obejrzysz nowe pobranie, nie zapisaną kopię.
3. Odfiltruj obrazy i znajdź zdjęcie główne. Sprawdź podgląd żądania, aby nie pomylić go z miniaturą galerii.
4. Obejrzyj przesłany rozmiar, wymiary i nagłówek odpowiedzi Content-Type. Adres wyglądający na JPG może dostarczać WebP lub AVIF.
5. Powtórz po odświeżeniu przy szerokości układu telefonu. Mały widok nie powinien niepotrzebnie pobierać największej wersji.

Nie oceniaj dostarczania tylko po rozmiarze pliku. Duża wersja może być uzasadniona dla wysokiej rozdzielczości lub powiększenia. Szukaj wyraźnych niedopasowań: miniatury rozciągniętej na całą galerię lub pełnego oryginału dla każdej małej karty.

Główne zdjęcie u góry powinno być dostępne szybko. Obrazy niżej zwykle mogą poczekać, aż użytkownik się do nich zbliży. Shopify odradza odroczone ładowanie obrazów widocznych bez przewijania. Jeśli pierwsze zdjęcie pojawia się późno, sprawdź zachowanie motywu; natychmiastowe ładowanie całej galerii może stworzyć inny problem.

Oddziel szybkość ładowania od przesunięć strony

Gdy główna fotografia jest największym widocznym elementem, może wpływać na Largest Contentful Paint (LCP), czyli czas pojawienia się największego widocznego obrazu lub bloku tekstu. Mniejszy plik pomaga, gdy pobieranie stanowi część opóźnienia. Zbyt późne żądanie może pozostać wolne po kompresji. Google w poradniku LCP wyjaśnia tę różnicę.

Jeśli zdjęcie po pojawieniu się przesuwa cenę lub przycisk zakupu w dół, motyw mógł nie zarezerwować wystarczająco miejsca. To przyczynia się do Cumulative Layout Shift (CLS), miary nieoczekiwanych przesunięć strony. Zarezerwuj miejsce w układzie zamiast mocniej kompresować. Zobacz przygotowany przez Google poradnik przesunięć układu oraz nasz poradnik obrazów i Core Web Vitals.

Porównuj tę samą stronę przed i po w podobnych warunkach, zmieniając jedną rzecz naraz. Odróżnij symulowany test PageSpeed od ewentualnych danych prawdziwych odwiedzających. Wyniki się wahają, a dane realne nie aktualizują się natychmiast. Zapisz rozwiązany problem zamiast polegać na jednym wyższym wyniku.

Znajdź przyczynę przed zmianą wszystkich zdjęć

Shopify w poradniku wydajności sklepu wymienia też motywy, aplikacje i dodany kod. Raporty korzystają z danych realnych odwiedzających. Jeśli obrazy są już wydajne, szukaj pozostałego wąskiego gardła zamiast kolejnej aplikacji lub silniejszej kompresji katalogu.

Które zdjęcia poprawić najpierw?

Zacznij od głównego zdjęcia i karty często odwiedzanego produktu, potem od ważnego banera na stronie głównej. Priorytetem jest widoczny problem: nieczytelna etykieta, obcięty produkt lub późne zdjęcie. Piąta fotografia rzadko oglądanej galerii jest zwykle mniej ważna niż obraz decydujący, czy klient będzie przeglądał dalej.

Zapisz stronę, oryginalne wymiary, kadr, format i uzyskaną poprawę. Zachowaj oryginał, aby cofnąć zły wynik. Stosuj sprawdzoną metodę do podobnych produktów, a wyjątki oglądaj osobno zamiast zastępować cały katalog naraz.

Często zadawane pytania

Jaki rozmiar zdjęć produktów jest najlepszy dla Shopify?

Nie ma jednej wielkości dla każdego układu. 2048 × 2048 to dobry start dla zdjęć kwadratowych, ale motyw, kompozycja i powiększenie określają potrzeby. Użyj ostrego oryginału w limitach i sprawdź opublikowaną stronę. Nie powiększaj małej fotografii tylko do 2048 pikseli.

Czy Shopify automatycznie kompresuje obrazy?

Shopify optymalizuje dostarczanie i może wysyłać różne rozmiary i formaty. Nie zastępuje to oryginału w panelu mocno skompresowaną kopią. Możesz poprawić kadr i nadmierne wymiary przed przesłaniem, ale nie musisz kompresować każdej fotografii.

Czy wszystkie zdjęcia powinny mieć mniej niż 200 KB?

Nie. Arbitralny cel może usunąć ważne szczegóły, zwłaszcza w powiększeniu. Sprawdź wielkość i jakość wersji pobieranej przez klienta. Mała karta i duża fotografia detalu mają inne wymagania.

PNG czy JPG dla Shopify?

Wypróbuj JPG dla zdjęć bez przezroczystości, a PNG dla przezroczystych grafik lub tekstu pogarszającego się w JPG. Sprawdź drobne szczegóły produktu. Shopify może dostarczyć inny format niż przesłany.

Czy potrzebuję aplikacji do optymalizacji obrazów?

Nie tylko po to, aby uzyskać automatyczne dostarczanie Shopify. Może pomóc z dużą biblioteką lub konkretnym zadaniem. Najpierw określ, czego nie robią obecne narzędzia i motyw. Sprawdź efekt na jednej stronie przed zastosowaniem w całym sklepie.

Czy potrzebny jest osobny obraz dla każdego ekranu?

Zwykle nie dla zdjęć produktów: dobry motyw pobiera różne wielkości z jednego oryginału. Osobna kompozycja mobilna pomaga, gdy baner komputerowy ucina obiekt na telefonie. To decyzja o układzie, nie powód do mnożenia każdej fotografii.