Kompresja zdjęć produktów w PrestaShop: szybsze karty produktu bez utraty jakości

Kompresja zdjęć produktów zmniejsza wagę plików graficznych, więc karta produktu w PrestaShop ładuje się szybciej. A przy rozsądnie dobranej jakości klient nie zobaczy żadnej różnicy. Kłopot zaczyna się zwykle od zdjęć prosto z aparatu albo od dostawcy. Kilka megabajtów na plik i listing, i galeria produktu robią się ociężałe. Niżej opisuję, jak dobrać format, ustawić miniatury i jakość, włączyć kompresję przy dodawaniu towaru i załatwić zdjęcia, które już siedzą w katalogu.

Dlaczego ciężkie zdjęcia spowalniają karty produktu w PrestaShop?

Bo to właśnie zdjęcia stanowią największą część danych, które przeglądarka pobiera na karcie produktu. Ich waga przekłada się wprost na szybkość sklepu. Do tego PrestaShop robi z jednego pliku kilka wariantów: miniaturę na listing, zdjęcie główne, wersję do powiększenia i parę innych (ile dokładnie, zależy od szablonu). Za duży albo słabo skompresowany oryginał? Problem powtarza się w każdym wariancie. Klient odczuwa to jako mulące przewijanie listy produktów i galerii. A na telefonie z mobilnym internetem jest jeszcze gorzej.

Kompresja stratna i bezstratna: co wybrać dla zdjęć produktów?

Do zwykłych fotek produktów w zupełności wystarcza kompresja stratna z dobrze ustawioną jakością. Bezstratną zostawiłbym dla grafik z tekstem, ostrymi krawędziami i przezroczystością. Różnica? Metoda bezstratna zmniejsza plik bez utraty choćby bitu danych obrazu. Stratna wycina część informacji, więc oszczędza więcej, tylko że przy zbyt agresywnych ustawieniach wychodzą rozmycia i artefakty. Głównym suwakiem jest parametr jakości w skali od 0 do 100. W praktyce najlepiej przepuścić przez kilka wartości parę typowych zdjęć, np. ciemny produkt, jasne tło i ujęcie z drobną fakturą, i wybrać najniższy próg, przy którym obraz dalej wygląda ostro. Tyle.

WebP w PrestaShop: czy warto zmienić format zdjęć?

Tak. WebP daje mniejsze pliki niż JPEG i PNG przy porównywalnej jakości, a w sklepie z tysiącami zdjęć to się szybko sumuje. Według poradnika web.dev o formacie WebP pliki w tym formacie są zwykle o 25-35% mniejsze od odpowiedników w JPEG i PNG. Obsługuje zarówno kompresję stratną, jak i bezstratną, więc sprawdzi się i przy zdjęciach, i przy grafikach.

Ale jest haczyk: starsze przeglądarki mogą WebP nie wyświetlić, więc potrzebny jest plik zapasowy. Da się to załatwić w kodzie szablonu (przeglądarka dostaje kilka wersji obrazu do wyboru) albo po stronie serwera, który patrzy na nagłówek żądania i wysyła format, jaki dana przeglądarka obsłuży. Zanim przestawisz cały katalog, sprawdź na kilku produktach, czy szablon, slider, moduł powiększania i reszta dodatków poprawnie pokazują nowe pliki. Lepiej wyłapać to na pięciu kartach niż na pięciu tysiącach.

Rozmiary miniatur PrestaShop: jak ustawić typy zdjęć bez zbędnych pikseli?

Każdy typ zdjęcia w PrestaShop powinien mieć wymiary zbliżone do miejsca, w którym szablon go wyświetla. Pchanie obrazu o szerokości 1200 pikseli do ramki, która ma ich kilkaset, to po prostu przepalony transfer. Zanim zaczniesz optymalizację, przejdź przez krótką checklistę:

• przejrzyj typy zdjęć w ustawieniach wyglądu i zanotuj, gdzie każdy jest używany,
• usuń typy, z których nie korzysta ani szablon, ani żaden moduł,
• dopasuj szerokość i wysokość pozostałych do rzeczywistych ramek w szablonie,
• wgrywaj oryginały w rozsądnej rozdzielczości, a nie pełne pliki z aparatu.

Po zmianie typów trzeba zregenerować miniatury. Przy dużym katalogu porządnie dociąża to serwer, więc polecam robić to poza godzinami ruchu i dopiero po zrobieniu kopii katalogu ze zdjęciami.

Jak zautomatyzować kompresję zdjęć produktów przy dodawaniu?

Najpewniejsza jest kompresja, która odpala się sama po przesłaniu zdjęcia. Nie zależy wtedy od tego, czy osoba wrzucająca produkty pamięta o ręcznej optymalizacji (a nie oszukujmy się, przy setnym produkcie w tygodniu nikt nie pamięta). Tak działa na przykład moduł Compressify dla PrestaShop, który po skonfigurowaniu klucza API kompresuje obrazy przez API Compressify.eu. Proces rusza po wygenerowaniu wariantów zdjęcia i nie wymaga ręcznej obsługi. Moduł potrafi przed kompresją zapisać oryginały, pozwala porównać wersję przed i po, przywrócić plik albo skompresować go jeszcze raz. I to jest konkretne zabezpieczenie. Któreś zdjęcie wyszło gorzej? Wracasz do oryginału bez grzebania po dysku.

Co zrobić ze zdjęciami, które już są w katalogu?

Te trzeba skompresować zbiorczo, bo automatyzacja przy dodawaniu obejmuje tylko nowe pliki. Bezpieczna kolejność:

1. Zrób kopię zapasową katalogu ze zdjęciami.
2. Przetestuj kompresję na kilku produktach o różnym charakterze zdjęć.
3. Uruchom masową optymalizację wszystkich nieskompresowanych plików.
4. Ponów próbę dla pozycji, które zakończyły się błędem.
5. Obejrzyj wybrane karty produktu na komputerze i telefonie.

Potem sprzątanie. Kopie oryginałów zajmują miejsce, więc stare backupy dobrze jest czyścić automatycznie albo zadaniem cron. W panelu modułu zaglądaj też do liczby dostępnych optymalizacji, wykorzystania limitów i statystyk oszczędności. Inaczej nie wiesz, ile faktycznie zyskałeś.

Moim zdaniem najlepiej sprawdza się podejście, w którym kompresja zdjęć produktów to stały element dodawania towaru, a nie jednorazowe sprzątanie raz na kilka lat. Dobrze dobrany format, miniatury dopasowane do szablonu i automatyczna optymalizacja nowych plików. Z takim zestawem sklep zostaje lekki, nawet kiedy katalog rośnie.

Najczęstsze pytania