Logo GRVision - Strony i sklepy internetowe
Darmowa konsultacja 881 932 088 kontakt@grvision.pl

Zdjęcia produktów do sklepu: rozmiary, formaty, waga

Publikacja: · Grzegorz Rapczyński

Zdjęcia to zwykle ponad połowa wagi sklepu internetowego i pierwsza rzecz, przez którą klient ocenia produkt. Zbyt małe wyglądają amatorsko, zbyt duże spowalniają stronę tak, że część ludzi nie doczeka się jej otwarcia. Ten tekst mówi, co konkretnie wgrywać do sklepu: w jakiej rozdzielczości, w jakim formacie, o jakiej wadze i jak to nazwać.

Jaką rozdzielczość wgrywać

Do sklepu wgrywa się jeden plik źródłowy na zdjęcie, a sklep sam generuje z niego wszystkie mniejsze wersje: miniaturę w koszyku, zdjęcie na liście produktów, duże na karcie. Twoim zadaniem jest dostarczyć źródło o rozsądnej wielkości.

Rodzaj zdjęcia Zalecany bok dłuższy Uwaga
Standardowy produkt 1200-1600 px Wystarcza na kartę produktu i powiększenie po najechaniu.
Produkt z detalem (biżuteria, tkaniny, elektronika) 2000-2400 px Gdy klient realnie ogląda fakturę materiału albo złącza.
Zdjęcie aranżacyjne, banner 1920-2400 px Szerokie, a nie kwadratowe. Osobny zestaw plików.
Logo, ikony format wektorowy SVG skaluje się bez straty i waży kilka kilobajtów.

Wyżej niż 2400 px nie ma sensu: żaden ekran tego nie pokaże, a plik rośnie kwadratowo. Poniżej 1000 px zaczyna być widać miękkość przy powiększaniu.

Proporcja jest ważniejsza, niż się wydaje. Wybierz jedną i trzymaj jej we wszystkich zdjęciach produktowych - najczęściej kwadrat 1:1, rzadziej 4:5. Sklep dopasowuje zdjęcia do jednego formatu i mieszanka proporcji kończy się albo przycinaniem w złym miejscu, albo białymi pasami po bokach na listingu.

Formaty: JPG, PNG, WebP, AVIF

  • JPG - domyślny wybór na zdjęcia. Mały, zgodny ze wszystkim. Do wgrywania do sklepu w zupełności wystarcza.
  • PNG - tylko wtedy, gdy potrzebujesz przezroczystego tła albo grafiki z ostrymi krawędziami i płaskimi kolorami. Zdjęcie produktu zapisane w PNG waży wielokrotnie więcej niż to samo w JPG i nie wygląda lepiej.
  • WebP - nowocześniejszy format, przy tej samej jakości o 25-35% lżejszy od JPG. Obsługują go wszystkie aktualne przeglądarki.
  • AVIF - jeszcze lżejszy, kosztem dłuższego kodowania. Przy dużych katalogach różnica jest odczuwalna.

Ważne rozróżnienie: Ty wgrywasz JPG, a sklep serwuje WebP albo AVIF. Nie musisz niczego konwertować ręcznie. Konfiguracja sklepu sprawia, że przeglądarka dostaje najlżejszy format, który obsługuje, a starsze urządzenia nadal dostają JPG. Robi się to raz, przy wdrożeniu.

Waga zdjęcia i dlaczego to tyle kosztuje

Na karcie produktu rozsądna granica to 150-250 KB na zdjęcie w wersji dużej i poniżej 50 KB na miniaturę. Przy takich wartościach karta z sześcioma zdjęciami mieści się w rozmiarze, który wczytuje się szybko nawet na słabym zasięgu.

Dlaczego to ma znaczenie w złotówkach, a nie tylko w wykresach: lista produktów z dwudziestoma zdjęciami po 2 MB to 40 MB do pobrania. Na telefonie w podróży taka strona nie otworzy się w czasie, w którym ktokolwiek zechce czekać. Największe zdjęcie na ekranie jest zwykle tym elementem, na który Google patrzy, oceniając szybkość ładowania - i tym samym, przez który klient decyduje, czy zostać.

Dobra wiadomość: dochodzi się do tych wartości bez straty widocznej gołym okiem. Zdjęcie z aparatu ma 6 MB, bo zawiera dane, których na ekranie nikt nie zobaczy. Zmniejszenie do 1600 px i zapis w jakości około 80% zbija je do około 200 KB, a różnicy nie widać nawet po powiększeniu. Szerzej o wpływie zdjęć na szybkość pisałem w artykule jak przyspieszyć sklep PrestaShop.

Ile zdjęć na produkt i jakie ujęcia

Od czterech do ośmiu. Poniżej czterech klient ma poczucie, że czegoś mu nie pokazano. Powyżej ośmiu przestaje przeglądać.

Zestaw, który sprawdza się niemal zawsze:

  1. Zdjęcie główne - cały produkt, na jednolitym tle, wypełniający kadr mniej więcej w 85%. To jedyne zdjęcie, które klient zobaczy na liście produktów i w wynikach wyszukiwania, więc musi być czytelne w rozmiarze miniatury.
  2. Drugie ujęcie - z boku albo z tyłu.
  3. Detal - szew, złącze, materiał, wykończenie. To zdjęcie odpowiada na pytanie o jakość.
  4. Skala - produkt w ręce, obok znanego przedmiotu albo w otoczeniu. Najczęstszy powód zwrotu to „myślałem, że jest większe”.
  5. Zastosowanie - produkt w użyciu, w naturalnym kontekście.
  6. Zawartość zestawu - jeśli w pudełku jest więcej niż jedna rzecz.

Jeśli sprzedajesz produkt z wymiarami, warto jedno zdjęcie poświęcić na rysunek z opisanymi wartościami. Zdejmuje to sporo pytań przed zakupem i trochę zwrotów po.

Spójność - rzecz, którą widać najbardziej

Klient rzadko ogląda jedno zdjęcie w izolacji. Widzi listing, czyli dwadzieścia zdjęć obok siebie - i tam natychmiast rzuca się w oczy, że każde zrobiono inaczej.

  • To samo tło we wszystkich zdjęciach głównych. Białe jest bezpieczne i wymagane przez większość porównywarek.
  • Ten sam kadr. Produkt zajmujący podobną część zdjęcia w każdej karcie. Inaczej jeden wygląda na duży, drugi na mały, choć są tej samej wielkości.
  • To samo światło. Zdjęcia robione o różnych porach dnia przy oknie mają różne odcienie bieli i widać to od razu.
  • Ta sama proporcja pliku źródłowego.

Spójność bije jakość pojedynczego ujęcia. Dwadzieścia przeciętnych, ale jednakowych zdjęć wygląda profesjonalnie. Dwadzieścia ładnych, ale każde inne, wygląda na sklep sklecony naprędce.

Nazwy plików i teksty alternatywne

Dwie drobne rzeczy, które nic nie kosztują, a robią różnicę w wyszukiwarce grafik i dla osób korzystających z czytników ekranu.

Nazwa pliku powinna opisywać produkt, bez polskich znaków i bez spacji:

  • Dobrze: koszulka-bawelniana-czerwona-przod.jpg
  • Źle: IMG_20260418_113402.jpg, DSC0042.jpg, zdjęcie 1 (kopia).jpg

Tekst alternatywny to opis dla kogoś, kto zdjęcia nie widzi. Pisz zdaniem, nie ciągiem słów kluczowych:

  • Dobrze: „Czerwona koszulka bawełniana z krótkim rękawem, widok z przodu”
  • Źle: „koszulka, koszulki, koszulka czerwona, tanie koszulki, sklep”

Przy dużym katalogu da się to uzupełnić automatycznie z nazwy produktu i numeru zdjęcia. Lepszy sensowny szablon niż puste pola albo upychanie słów kluczowych, które i tak nic nie daje.

Zdjęcia wariantów

Jeśli produkt ma kolory, każdy kolor potrzebuje własnego zdjęcia przypisanego do wariantu. Wtedy po kliknięciu w „czarny” zmienia się zdjęcie, a nie tylko podpis. To jedna z tych rzeczy, których brak klienci odbierają jako błąd sklepu.

Rozmiary to inna sprawa - dla nich osobne zdjęcia nie są potrzebne. Wystarczy tabela rozmiarów, najlepiej dostępna z karty produktu bez opuszczania strony.

W pliku importu przypisanie robi się przez nazwę: koszulka-czerwona-1.jpg, koszulka-czarna-1.jpg przy odpowiednich wierszach wariantów. Jak taki plik przygotować, opisałem w tekście o pliku z produktami do importu.

Ze zdjęciami wiąże się jedna operacja, którą warto rozumieć przed pierwszym uruchomieniem: regeneracja miniatur. Przy dużym katalogu potrafi obciążyć serwer na godziny, więc lepiej wiedzieć wcześniej, kiedy jest naprawdę potrzebna.

Co robi z tym PrestaShop

PrestaShop po wgraniu zdjęcia generuje z niego zestaw mniejszych wersji o rozmiarach zdefiniowanych w ustawieniach. Kilka rzeczy warto ustawić świadomie:

  • Przejrzyj listę rozmiarów. Domyślnie jest ich sporo, część pochodzi z szablonu, którego już nie używasz. Każdy zbędny rozmiar to kopia każdego zdjęcia na dysku.
  • Włącz serwowanie WebP albo AVIF. Nowsze wersje PrestaShop mają to w ustawieniach, w starszych robi to moduł.
  • Zostaw wczytywanie na żądanie. Zdjęcia poniżej pierwszego ekranu ładują się dopiero przy przewijaniu - z jednym wyjątkiem: zdjęcie główne na karcie produktu powinno ładować się od razu, bo to ono decyduje o ocenie szybkości.
  • Po zmianie rozmiarów przegeneruj miniatury. Przy dużym katalogu to potrafi trwać, więc lepiej zrobić to poza godzinami ruchu.

Najczęstsze błędy

  • Zdjęcia prosto z telefonu, po 6 MB każde. Sklep zadziała, ale będzie się wlókł.
  • Tło raz białe, raz szare, raz kuchenny blat.
  • Znak wodny na całym zdjęciu. Porównywarki takie zdjęcia odrzucają, a klientom przeszkadzają.
  • Zdjęcia pobrane ze strony producenta bez zgody. To cudzy materiał i bywa, że upomni się o niego prawnik.
  • Cena albo napis „PROMOCJA” wklejone w zdjęcie. Przy zmianie ceny trzeba przerabiać wszystkie pliki, a porównywarki takie zdjęcia odrzucają.
  • Produkt ginący w kadrze - zajmujący jedną czwartą zdjęcia, nieczytelny w miniaturze.
  • Zdjęcie główne aranżacyjne. Na listingu potrzebny jest czysty produkt. Aranżacja jest świetna jako drugie albo trzecie ujęcie.
  • Brak zdjęcia dla części wariantów - klient klika kolor i nic się nie zmienia.

Najczęstsze pytania

Czy muszę mieć fotografa?

Nie na start. Telefon z ostatnich kilku lat, jednolite tło, światło dzienne od okna i statyw za kilkadziesiąt złotych dają wyniki, które spokojnie wystarczą. Ważniejsza od sprzętu jest powtarzalność ustawienia.

Czy sam mam konwertować zdjęcia do WebP?

Nie. Wgrywaj JPG, konwersję robi sklep. Ręczne konwertowanie utrudnia tylko późniejsze zmiany.

Ile powinno ważyć zdjęcie, które wgrywam?

Plik źródłowy po zmniejszeniu do 1600 px zwykle mieści się w 200-400 KB. Sklep i tak wygeneruje z niego lżejsze wersje, więc nie ma potrzeby ściskać go wcześniej do granic możliwości.

Mam 500 zdjęć w za dużym rozmiarze. Co teraz?

Nie ruszaj ich ręcznie. Zmniejszenie i optymalizacja całego katalogu to operacja wsadowa - jednorazowa praca, po której sklep zwykle wyraźnie przyspiesza.

Czy zdjęcia mają wpływ na pozycje w Google?

Pośrednio i wyraźnie. Szybkość ładowania jest czynnikiem rankingowym, a największe zdjęcie na ekranie zwykle o niej decyduje. Do tego dochodzi ruch z wyszukiwarki grafik, do którego potrzebne są sensowne nazwy plików i teksty alternatywne.

Sprawdzę zdjęcia w Twoim sklepie

Jeśli nie wiesz, czy zdjęcia w Twoim sklepie nie ciążą mu za bardzo, napisz. Sprawdzę ich wagę, formaty i konfigurację miniatur, a potem powiem, ile da się z tego urwać bez pogorszenia jakości - formularz kontaktowy, 881 932 088 lub kontakt@grvision.pl.