Optymalizacja zdjęć w sklepie internetowym. Jak przygotować i ustawić zdjęcia w PrestaShop

Co to jest optymalizacja zdjęć i dlaczego sklep jej potrzebuje?

Co to znaczy optymalizacja zdjęć? To przygotowanie zdjęć tak, żeby ważyły jak najmniej przy jakości, która nadal sprzedaje produkt. Optymalizacja grafik w sklepie obejmuje:

• wymiary pliku, 
• format pliku,
• kompresję pliku,
• sposób, w jaki szablon wyświetla zdjęcie na stronie.

W e-commerce ten temat waży znacznie więcej niż na zwykłej witrynie firmowej. Prosta strona potrzebuje kilkunastu grafik, podczas gdy katalog produktów liczy ich setki lub tysiące. Z każdego dodanego pliku PrestaShop generuje automatycznie kilka miniatur w różnych formatach. Co więcej, większość użytkowników przegląda ofertę na smartfonach, więc każdy zbędny kilobajt bezpośrednio opóźnia wczytywanie kart.

Optymalizacja nie może przy tym psuć jakości. Zdjęcie zastępuje Klientowi obejrzenie produktu w ręce, więc rozmazana faktura materiału lub przekłamany kolor zniechęcają do zakupu tak samo jak wolna strona. O tym, jak zdjęcia i opisy wpływają na decyzję zakupową, przeczytasz więcej w sposobach prezentacji produktu w sklepie internetowym.

ALT: Tablet z miniaturami różnych zdjęć z sesji w plenerze

Jak zdjęcia wpływają na szybkość sklepu i wyniki w Google?

Jednym z najczęstszych błędów, jakie pojawiają się w sklepach internetowych na PrestaShop, jest nieprawidłowa konfiguracja obrazów oraz szablonu. Z reguły umykają nam takie szczegóły jak np. zbyt duży rozmiar obrazu, a to właśnie detale mają największy wpływ na cały sklep i mogą powodować liczne problemy. Najczęstszymi skutkami błędnie skonfigurowanych obrazów są:

• bardzo długi czas wczytywania strony, co powoduje wolne działanie sklepu, a w konsekwencji opuszczenie go przez potencjalnego Klienta,
• ogromne zużycie miejsca na serwerze, co prowadzi do konieczności zakupu dodatkowej przestrzeni hostingowej i generuje koszty (jak dobrać serwer do wielkości sklepu, znajdziesz w artykule o wyborze hostingu dla sklepu na PrestaShop).

Skalę widać w danych HTTP Archive. Według raportu Web Almanac 2025: Page Weight mediana wagi zdjęć na mobilnej stronie głównej wynosi 911 KB, a spośród typów treści to właśnie zdjęcia ważą na stronach najwięcej. Z rozdziału Web Almanac 2025: Performance wynika z kolei, że na 76% stron mobilnych największym elementem widocznym po wejściu jest zdjęcie.

Ten element mierzy wskaźnik LCP (Largest Contentful Paint), czyli czas, po którym na ekranie pojawia się największy fragment treści. Google uznaje za dobry wynik LCP do 2,5 sekundy. Na karcie produktu największym elementem jest zwykle główne zdjęcie, więc jego waga i sposób ładowania przekładają się wprost na wynik w PageSpeed Insights. Szybkość strony to jeden z sygnałów, które Google bierze pod uwagę przy ocenie stron, a jak czytać wyniki pomiaru i od czego zacząć poprawki, dowiesz się z artykułu: Google PageSpeed Insights dla PrestaShop.

Zdjęcia to jedna z dróg do szybszego sklepu. Inna to pamięć podręczna, która skraca pracę serwera przy składaniu stron; jak działa. Najlepsze efekty daje praca na obu frontach naraz.

Dowiedz się więcej: Cache PrestaShop: jak to dokładnie działa

ALT: Kobieta wybierająca na komputerze zdjęcia z sesji plenerowej

Kompresja zdjęć: format i jakość przed wgraniem do sklepu

Optymalizacja zaczyna się, zanim zdjęcie trafi do panelu. Po przesłaniu zdjęć do PrestaShop zostaną automatycznie wygenerowane różne rozmiary zdjęć (w tym także pliki poglądowe oraz zdjęcia do wersji mobilnej sklepu). Należy więc przesłać główną wersję zdjęcia, która będzie mogła zostać przeskalowana na inne rozmiary. Aby upewnić się, że przesłane zdjęcie ma odpowiedni rozmiar, należy zadbać o jego proporcje.

Główna wersja powinna mieć wymiary dopasowane do największego miejsca, w którym zdjęcie pojawi się w sklepie, zwykle do powiększenia na karcie produktu. Plik prosto z aparatu ma często kilka tysięcy pikseli szerokości i kilka megabajtów, a sklep i tak wytnie z niego mniejsze miniatury, tyle że zajmie to więcej czasu i miejsca na serwerze. Trzymaj też te same proporcje w całej kategorii, bo zdjęcia w różnych proporcjach rozjeżdżają kafelki na liście produktów.

Kompresja zdjęć zmniejsza wagę pliku na dwa sposoby:

1. Kompresja bezstratna usuwa z pliku zbędne dane i nie zmienia obrazu, więc oszczędność jest niewielka. 
2. Kompresja stratna upraszcza szczegóły, których oko zwykle nie wyłapuje i daje dużo mniejsze pliki, za to przy zbyt mocnym ustawieniu na zdjęciu pojawiają się skazy: kwadraty, rozmyte krawędzie, smugi na gładkim tle. 

Każdy zapis w JPEG kompresuje zdjęcie od nowa, dlatego edytuj je na pliku źródłowym i zapisz w JPEG raz, na samym końcu.

Oto kilka najważniejszych punktów, które należy wziąć pod uwagę, optymalizując zdjęcia na stronie:

• format obrazu: najpopularniejszymi formatami obrazu są formaty JPEG (JPG) oraz PNG. Ze względu na lepszą umiejętność kompresowania zaleca się, aby zdjęcia w sklepie na PrestaShop posiadały format JPEG. PNG zostaw na sytuacje, w których plik źródłowy jest w PNG, np. grafikę z przezroczystym tłem, na co wskazuje też dokumentacja ustawień zdjęć PrestaShop,
• kompresja JPEG: dokumentacja PrestaShop zaleca, żeby nie ustawiać jakości poniżej 80, a w ostateczności 75, bo niżej pojawiają się widoczne skazy. Jeśli zdjęcie będzie posiadało widoczne gołym okiem skazy, należy wybrać wyższą wartość, która pozwoli zachować dobry wygląd obrazu,
• kompresja PNG: w formacie PNG zaleca się kompresowanie zdjęć najwyżej do poziomu 6, w ostateczności 7 (tu wyższa liczba oznacza mocniejszą kompresję).

Liczby z ustawień jakości nie przenoszą się między programami. Jakość „80” w programie graficznym i „80” w panelu sklepu mogą dać różne pliki, bo każde narzędzie liczy jakość JPEG po swojemu. Ostatecznie decyduje więc oko: porównaj zdjęcie po kompresji z oryginałem w powiększeniu, najlepiej na fakturze materiału i jednolitym tle.

ALT: Kobieta oglądająca zdjęcia na aparacie z wyświetlonymi innymi zdjęciami na ekranie laptopa

WebP i AVIF w PrestaShop

WebP i AVIF to nowsze formaty, które przy podobnej jakości ważą mniej niż JPEG i PNG. Według Google zdjęcia w WebP są o 25 do 34% mniejsze od porównywalnych plików JPEG, a w wersji bezstratnej o 26% mniejsze od PNG. AVIF zwykle schodzi jeszcze niżej przy dobrej jakości, dlatego coraz więcej sklepów wyświetla zdjęcia w jednym z tych formatów, a JPEG trzyma jako plik bazowy.

Obsługa w PrestaShop zależy od wersji. PrestaShop 8.1 wprowadził generowanie zdjęć w WebP i AVIF jako funkcję eksperymentalną: włącza się ją w Parametrach zaawansowanych, w sekcji z nowymi i eksperymentalnymi funkcjami, a motyw trzeba dostosować, żeby przeglądarka mogła wybrać lżejszy format. PrestaShop 9.0 obsługuje WebP i AVIF natywnie.

Ustawienia zdjęć w PrestaShop: rozmiary, miniatury i generowanie

Pierwszym krokiem do poprawnej konfiguracji obrazów w panelu sklepu internetowego na PrestaShop jest sprawdzenie rozmiarów zdjęć. W tym celu należy wybrać sekcję Wygląd, a następnie Zdjęcia.

W tej zakładce znajdziemy nie tylko rozmiary zdjęć, ale także miejsca, w których się znajdują. Informacja ta jest niezbędna do dalszej konfiguracji, ponieważ pozwoli na wskazanie miejsc, które należy zoptymalizować.

Typy miniatur: ile rozmiarów potrzebuje sklep

Następnie należy zdefiniować i określić rozmiary zdjęć. Będą one różne w zależności od miejsc, w których się znajdują. W Convertis zalecamy taki podział:

• zdjęcia produktowe: 3 do 4 rozmiarów obrazów,
• zdjęcia do kategorii: 1 do 2 rozmiarów obrazów,
• marki, dostawy, sklepy: 1 rozmiar obrazu.

Dla porównania domyślny motyw Classic ma siedem typów miniatur, zapisanych w pliku konfiguracyjnym motywu theme.yml, a zdjęcia produktów korzystają z pięciu z nich. Każdy motyw ma własny zestaw, więc w Twoim sklepie nazwy i wymiary mogą wyglądać inaczej.

Częstym błędem popełnianym w sklepach internetowych na PrestaShop jest nieodpowiednia konfiguracja ustawień. W panelu zbierają się typy miniatur z kilku źródeł:

• domyślne rozmiary rekomendowane przez platformę PrestaShop,
• rozmiary wymagane przez szablon,
• wszystkie inne rozmiary stworzone przez użytkownika.

Ważne jest, aby spośród podobnych rozmiarów wybrać jeden właściwy. Co to oznacza?

Dla każdego przesłanego obrazu tworzone są dodatkowe miniatury w różnych rozmiarach. Powoduje to zużycie dodatkowej ilości miejsca na serwerze. Warto więc ograniczyć niepotrzebne powielanie obrazów. Jeśli wartości dwóch typów miniatur różnią się jakąś niewielką ilością pikseli, warto zdecydować się na jeden typ i ten drugi wyłączyć.

W przypadku gdy na stronie sklepu znajduje się 10 000 produktów z jednym zdjęciem każdy i pięć dostępnych rozmiarów obrazów, wygenerowanych zostanie kolejnych 50 000. Jeśli dezaktywujemy jeden rozmiar, to jedna prosta czynność pozwoli zaoszczędzić 10 000 dodatkowych obrazków, czyli 20% miniatur produktów. Przy kilku zdjęciach na produkt i wersjach w WebP lub AVIF ta oszczędność rośnie kilkukrotnie.

Na tej samej stronie ustawień znajdziesz jeszcze opcje, które łatwo przeoczyć:

• Zdjęcia w wysokiej rozdzielczości. Ta opcja też mnoży pliki. Tworzy dla każdego zdjęcia dodatkową wersję o dwukrotnie wyższej rozdzielczości, z myślą o ekranach o dużej gęstości pikseli i według dokumentacji PrestaShop podwaja liczbę plików ze zdjęciami. Włączaj ją świadomie, wiedząc, ile miejsca zajmie przy Twoim katalogu.
• Generowanie obrazu na podstawie jednej z krawędzi obrazu źródłowego. Dzięki tej funkcji możliwe jest określenie położenia obrazu w określonym miejscu: dostosowanie go do wysokości ramki, szerokości ramki lub automatycznie, tak by obraz zajął jak najwięcej miejsca w ramce. Przy zdjęciach w różnych proporcjach to ustawienie decyduje, czy produkt wypełni kafelek, czy zostanie otoczony pustym tłem.
• Maksymalny rozmiar pliku oraz szerokość i wysokość zdjęcia. Te pola nie dotyczą zdjęć produktów, które wgrywasz w panelu. To limity dla zdjęć wgrywanych przez Klientów przy personalizacji produktu, np. grafiki do nadruku na kubku. Według dokumentacji PrestaShop limit rozmiaru domyślnie odpowiada ustawieniu PHP na serwerze.

Regenerowanie miniatur po zmianie rozmiarów

Zmiana rozmiaru w panelu nie przerabia zdjęć, które już są w sklepie. Po każdej zmianie typów miniatur trzeba je zregenerować: wybrać, dla jakich treści sklep ma przygotować zdjęcia od nowa (np. tylko dla produktów), zdecydować, czy zachować poprzednie miniatury, i uruchomić regenerowanie. Dokumentacja PrestaShop ostrzega, że miniatury wgrane ręcznie zostaną przy tym zastąpione automatycznymi.

Przy dużym katalogu regenerowanie z panelu trwa długo, dlatego od wersji 9.1 można je uruchomić poleceniem konsoli, bez przechodzenia przez panel. Takie zadanie lepiej zlecić Ekspertowi PrestaShop lub programiście po stronie sklepu, razem z kopią zapasową folderu ze zdjęciami.

ALT: Ekran komputera z wyświetlanymi zdjęciami w szablonie

Zdjęcia w szablonie: rozmiar, leniwe ładowanie i wymiary

Po usunięciu wybranego rodzaju miniatur ważne jest, aby sprawdzić, czy wybrany rozmiar nie jest wywoływany niepotrzebnie w szablonie. W tym celu należy zweryfikować strony i szablony stron, do których był przypisany.

Po znalezieniu miejsc, w których użyty został dany rodzaj miniatury, należy wpisać w szablonie nową wartość, której chcemy użyć. Jeśli tego zabraknie, szablon będzie prosił o plik, którego sklep już nie generuje, i w miejscu zdjęcia może pojawić się puste pole.

Warto także sprawdzić wymiary obrazów, które są faktycznie używane na stronie. Nie ma konieczności ładowania obrazu w rozmiarze 2000 x 2000 w kartach produktu, jeśli ramka, w której znajduje się obraz, ma wymiary 800 x 800. Powoduje to utratę transferu, wczytanie strony produktu zajmie dużo więcej czasu, a efekt skalowania w dół zbyt dużego zdjęcia może być gorszy dla oka, niż w przypadku dodania tylko poprawnego wymiaru zdjęcia. W tym przypadku to przeglądarka skaluje obraz załadowany z serwera.

Należy również zwrócić uwagę na typowy błąd pojawiający się w sklepach internetowych. Listy produktów wyświetlają zwykle zdjęcia w rozmiarach około 200 x 300 px. Tymczasem ładowane są obrazy dużo większe, które są skalowane w dół, aby dopasować się do przestrzeni kafelka z produktem. Przeglądarka pobiera wtedy wielokrotnie więcej danych, niż potrzebuje, co spowalnia prędkość ładowania strony, zwłaszcza w kategoriach z kilkudziesięcioma produktami na stronie. Zupełnie niepotrzebnie! Lighthouse, czyli narzędzie, na którym opiera się PageSpeed Insights, oznacza takie zdjęcie jako zdjęcie o niewłaściwym rozmiarze, gdy plik jest wyraźnie większy od miejsca, w którym się wyświetla.

Rozwiązaniem są zdjęcia dopasowane do ekranu (w kodzie atrybut srcset). Szablon podaje przeglądarce kilka wersji tego samego zdjęcia, a ona sama wybiera najmniejszą, która wystarczy na danym ekranie. Telefon pobiera wtedy mniejszy plik niż komputer, a Klient nie widzi różnicy w jakości.

ALT: Kobieta edytująca w programie graficznym zdjęcie ubrań na wieszakach

Leniwe ładowanie a główne zdjęcie produktu

Leniwe ładowanie (lazy loading) polega na tym, że przeglądarka pobiera zdjęcie dopiero wtedy, gdy Klient przewinie stronę w jego pobliże. Wyjątkiem jest główne zdjęcie, które Klient widzi od razu po wejściu na kartę produktu: gdy ładuje się leniwie, przeglądarka zaczyna je pobierać później, niż mogłaby, i wynik LCP się pogarsza. Dlatego Google odradza leniwe ładowanie największego elementu strony, a mimo to według Web Almanac 2025 robi tak 16 do 17% stron.

O tym, czy główne zdjęcie ładuje się leniwie, decyduje kod motywu, więc w panelu nie można tego zmienić. W domyślnym motywie Classic duże zdjęcie na karcie produktu ma włączone leniwe ładowanie, czyli dokładnie to, czego Google radzi unikać. Nowszy motyw Hummingbird pierwszemu zdjęciu w galerii produktu nadaje wysoki priorytet pobierania, a leniwie ładuje dopiero kolejne. Jeśli Twój motyw powstał na bazie Classic lub nie wiesz, jak go zbudowano, sprawdź w PageSpeed Insights jedną kartę produktu. Raport pokaże, czy największy element strony ładuje się leniwie. Wtedy zwykle wystarczy jedna zmiana w szablonie karty produktu, którą Ekspert PrestaShop wprowadzi bez przebudowy motywu.

Szablon powinien też podawać przy każdym zdjęciu jego szerokość i wysokość. Przeglądarka rezerwuje wtedy miejsce, zanim zdjęcie się pobierze, i strona nie przeskakuje w trakcie ładowania. To przeskakiwanie mierzy wskaźnik CLS (Cumulative Layout Shift), a Klient odczuwa je, gdy chce kliknąć „Dodaj do koszyka”, a przycisk ucieka mu w dół. Podanie wymiarów zdjęć to jeden z podstawowych sposobów na poprawę CLS, a według rozdziału Performance w Web Almanac 2025 na 62% stron mobilnych co najmniej jedno zdjęcie ich nie ma.

Jeśli chcesz wiedzieć, które z tych błędów dotyczą Twojego sklepu, zacznij od pomiaru. Audyt PageSpeed pokazuje, które zdjęcia i fragmenty szablonu spowalniają strony i w jakiej kolejności je poprawić.

Zdjęcia a SEO: nazwy plików i tekst alternatywny

Zdjęcia mogą przyprowadzać Klientów także z wyszukiwarki grafiki. Żeby Google zrozumiał, co przedstawiają, wytyczne Google Search Central dotyczące zdjęć zalecają kilka prostych rzeczy.

• Opisowa nazwa pliku. „IMG_4021.jpg” nic nie mówi wyszukiwarce, a „sukienka-lniana-zielona-midi.jpg” mówi, co jest na zdjęciu. W PrestaShop nazwę zdjęcia produktu w adresie tworzy zwykle przyjazny adres URL produktu, więc dobrze napisany adres produktu pracuje też na zdjęcia. Nazwy plików mają większe znaczenie przy banerach i grafikach we wpisach.
• Tekst alternatywny (atrybut ALT). Opisuje, co jest na zdjęciu. Czyta go zarówno wyszukiwarka, jak i czytnik ekranu osoby niewidomej. Powinien brzmieć jak zdanie, bez upychania słów kluczowych: „Lniana sukienka midi w kolorze butelkowej zieleni, widok z tyłu” zamiast „sukienka, sukienki damskie, sukienka lniana, tania sukienka”. W PrestaShop wpiszesz go w polu legendy przy każdym zdjęciu produktu.
• Mapa witryny dla zdjęć. Pomaga Google znaleźć zdjęcia, których nie odkryłby sam. Jak ją przygotować, sprawdzisz w artykule o mapie witryny w PrestaShop.
• Obsługiwane formaty. Google indeksuje m.in. JPEG, PNG, WebP i AVIF, więc przejście na lżejsze formaty nie zaszkodzi widoczności zdjęć.

ALT: Kobieca ręka trzymająca zdjęcie z aparatu typu Polaroid z krajobrazem w tle

Optymalizacja zdjęć w sklepie internetowym: podsumowanie i pierwszy krok dla Twojego sklepu

Właściwa optymalizacja zdjęć w sklepie internetowym to bardzo ważna i często bagatelizowana kwestia ustawień strony www. Prawidłowa konfiguracja obrazów pozytywnie wpłynie na prędkość ładowania się strony, pozycjonowanie w wyszukiwarce Google, a także sukces sklepu. 

Najwięcej zyskasz, jeśli pójdziesz po kolei: 

1. najpierw plik o właściwych wymiarach i jakości, 
2. potem rozsądna liczba typów miniatur w panelu, 
3. na końcu szablon, który pobiera właściwy rozmiar i nie odkłada ładowania głównego zdjęcia. 

Pierwszy krok zajmie kilkanaście minut. Sprawdź w PageSpeed Insights jedną kartę produktu i jedną kategorię na telefonie, a w panelu policz, ile typów miniatur mają włączone zdjęcia produktów.

Jeśli wolisz przejść przez to z kimś, kto zna PrestaShop od strony kodu, odezwij się do nas. Sprawdzimy ustawienia zdjęć i szablon Twojego sklepu i powiemy wprost, co poprawić najpierw, a co może poczekać.

Zobacz także:

Jak sprawdzić, czy strona jest zaindeksowana w Google i jak przyspieszyć indeksację sklepu na PrestaShop?

5 najczęstszych powodów, dla których upadają sklepy internetowe

15 powodów, przez które Twój sklep na PrestaShop nie sprzedaje