Obrazy WebP w PrestaShop: konfiguracja i pułapki

Czym jest WebP i dlaczego ma znaczenie dla PrestaShop

WebP to nowoczesny format obrazów opracowany przez Google, który zapewnia zarówno kompresję stratną, jak i bezstratną dla obrazów internetowych. W porównaniu z tradycyjnymi formatami, takimi jak JPEG i PNG, WebP zazwyczaj dostarcza o 25-35% mniejsze pliki przy równoważnej jakości wizualnej. Dla sklepu e-commerce działającego na PrestaShop, gdzie strony produktów często zawierają dziesiątki obrazów, przejście na WebP może dramatycznie zmniejszyć wagę stron, poprawić czasy ładowania i podnieść wyniki Core Web Vitals — a wszystko to bezpośrednio wpływa na pozycje SEO i współczynniki konwersji.

W przeciwieństwie do starszych formatów nowej generacji, które miały problemy z adopcją, WebP osiągnął niemal uniwersalne wsparcie przeglądarek. Stan na rok 2026 — każda główna przeglądarka — Chrome, Firefox, Safari, Edge, Opera i ich mobilne odpowiedniki — w pełni obsługuje WebP. Nawet dawni opornicy, jak starsze wersje Safari na macOS Catalina, są obecnie statystycznie nieistotni, stanowiąc mniej niż 0,3% globalnego ruchu. Oznacza to, że możesz z pewnością serwować obrazy WebP praktycznie wszystkim odwiedzającym bez martwienia się o problemy z kompatybilnością.

Dla sprzedawców korzystających z PrestaShop zyski wydajnościowe są znaczące. Typowy katalog produktów z 1000 produktów i 5 obrazami każdy może zaobserwować redukcję łącznego rozmiaru obrazów z 500 MB do poniżej 350 MB. Na stronach list produktów wyświetlających 20-40 miniatur, przekłada się to na 200-400 KB oszczędności przy każdym załadowaniu strony — wystarczająco, aby znacząco poprawić metryki Time to First Contentful Paint i Largest Contentful Paint.

Włączanie WebP w PrestaShop 1.7 i 8.x

PrestaShop 1.7.8+ i wszystkie wersje 8.x zawierają natywne wsparcie dla WebP. Funkcja jest wbudowana w system regeneracji obrazów i może być włączona przez panel administracyjny. Oto jak ją aktywować:

1. Przejdź do Wygląd > Ustawienia obrazów (w PS 8.x) lub Preferencje > Obrazy (w PS 1.7).
2. Poszukaj sekcji Opcje generowania obrazów na dole strony.
3. Znajdź ustawienie Format obrazów i wybierz jedną z opcji związanych z WebP. PrestaShop zazwyczaj oferuje: tylko JPEG, tylko PNG, tylko WebP lub JPEG/PNG + WebP (generuje oba formaty).
4. Wybierz JPEG/PNG + WebP, jeśli chcesz kompatybilność wsteczną, lub Tylko WebP, jeśli masz pewność, że wszyscy Twoi odwiedzający używają nowoczesnych przeglądarek.
5. Ustaw suwak Jakość WebP. Wartość między 80 a 85 zapewnia doskonałą równowagę między rozmiarem pliku a jakością wizualną dla fotografii produktowej.
6. Kliknij Zapisz, a następnie kliknij Regeneruj miniatury, aby utworzyć wersje WebP wszystkich istniejących obrazów.

Proces regeneracji może zająć znaczną ilość czasu przy dużych katalogach. Dla sklepu z 5000+ produktami, spodziewaj się procesu trwającego od 30 minut do kilku godzin w zależności od zasobów serwera. Zdecydowanie zaleca się uruchamianie regeneracji poza godzinami szczytu lub przez CLI, aby uniknąć problemów z limitem czasu PHP.

Regeneracja CLI dla dużych katalogów

Dla sklepów z tysiącami produktów regeneracja przez przeglądarkę prawdopodobnie przekroczy limit czasu. Użyj zamiast tego podejścia CLI:

php bin/console prestashop:image:regenerate --format=all

To polecenie działa bez ograniczeń limitu czasu serwera webowego. Możesz również celować w konkretne typy obrazów:

php bin/console prestashop:image:regenerate --type=products --format=all\nphp bin/console prestashop:image:regenerate --type=categories --format=all

W wersjach PrestaShop 1.7, które nie mają polecenia konsolowego, możesz zwiększyć limity czasu PHP i uruchomić regenerację przez panel administracyjny lub użyć niestandardowego skryptu PHP, który bezpośrednio wywołuje klasę ImageManager.

Konfiguracja serwera: reguły Apache .htaccess

Nawet po włączeniu generowania WebP w PrestaShop, Twój serwer musi być skonfigurowany do serwowania prawidłowego formatu. PrestaShop generuje pliki WebP obok oryginalnych plików JPEG/PNG, ale serwer musi wiedzieć, kiedy serwować który format.

Dla serwerów Apache dodaj następujące reguły do pliku .htaccess w głównym katalogu PrestaShop lub w katalogu img/:

<IfModule mod_rewrite.c>\n  RewriteEngine On\n\n  # Serwuj obrazy WebP, jeśli przeglądarka je obsługuje i plik istnieje\n  RewriteCond %{HTTP_ACCEPT} image/webp\n  RewriteCond %{REQUEST_FILENAME} (.+)\\.(jpe?g|png)$\n  RewriteCond %1.webp -f\n  RewriteRule (.+)\\.(jpe?g|png)$ $1.webp [T=image/webp,E=REQUEST_image,L]\n</IfModule>\n\n# Ustaw prawidłowy typ MIME dla WebP\n<IfModule mod_mime.c>\n  AddType image/webp .webp\n</IfModule>\n\n# Nagłówek Vary zapobiegający problemom z buforowaniem\n<IfModule mod_headers.c>\n  Header append Vary Accept env=REQUEST_image\n</IfModule>

Te reguły działają następująco: gdy przeglądarka żąda pliku JPEG lub PNG, serwer sprawdza, czy przeglądarka wysyła nagłówek Accept: image/webp. Jeśli tak, i wersja .webp pliku istnieje na dysku, serwer transparentnie serwuje plik WebP zamiast oryginału. Nagłówek Vary: Accept zapewnia, że proxy buforujące przechowują oddzielne wersje dla przeglądarek obsługujących i nieobsługujących WebP.

Upewnij się, że mod_rewrite, mod_mime i mod_headers są włączone w Twojej instalacji Apache. Większość środowisk hostingu współdzielonego ma je domyślnie włączone, ale możesz zweryfikować u swojego dostawcy hostingu.

Konfiguracja Nginx

Dla sklepów działających na Nginx konfiguracja trafia do bloku server lub bloku location w pliku konfiguracyjnym Twojej witryny:

map $http_accept $webp_suffix {\n  default \"\";\n  \"~*image/webp\" \".webp\";\n}\n\nserver {\n  # ... istniejąca konfiguracja ...\n\n  location ~* ^(/img/.+)\\.(jpe?g|png)$ {\n    set $img_path $1;\n    add_header Vary Accept;\n    try_files $img_path$webp_suffix $uri =404;\n  }\n}

Dyrektywa map na poziomie http sprawdza, czy klient wysyła nagłówek Accept kompatybilny z WebP i odpowiednio ustawia zmienną. Blok location następnie używa try_files, aby najpierw spróbować zaserwować wersję WebP, wracając do oryginalnego formatu, jeśli plik WebP nie istnieje.

Po modyfikacji konfiguracji Nginx zawsze testuj przed przeładowaniem:

nginx -t\nnginx -s reload

Kwestie CDN

Jeśli używasz CDN, takiego jak Cloudflare, KeyCDN lub Bunny.net przed swoim sklepem PrestaShop, dostarczanie WebP wymaga dodatkowej uwagi.

Cloudflare

Cloudflare oferuje wbudowaną konwersję WebP poprzez funkcję Polish (dostępną na planach Pro i wyższych). Gdy Polish jest włączony z konwersją WebP, Cloudflare automatycznie konwertuje obrazy na WebP na krawędzi sieci — co oznacza, że nie musisz w ogóle generować plików WebP na swoim serwerze. Jednak bądź świadomy tych zastrzeżeń:

• Polish działa tylko dla obrazów serwowanych przez proxy Cloudflare (włączona pomarańczowa chmurka).
• Nie konwertuje obrazów większych niż 10 MB ani obrazów z pewnymi profilami kolorów.
• Początkowa konwersja dodaje opóźnienie przy pierwszym żądaniu; kolejne żądania są serwowane z cache.
• Jeśli również generujesz WebP lokalnie, możesz uzyskać podwójną konwersję, co może nieznacznie obniżyć jakość.

Jeśli wolisz serwować własne pliki WebP przez Cloudflare, upewnij się, że nagłówek Vary: Accept jest obsługiwany prawidłowo. Domyślnie Cloudflare usuwa nagłówek Vary. Możesz potrzebować utworzyć Cache Rule lub użyć Workera, aby zapewnić prawidłową negocjację treści.

Inne CDN-y

Większość nowoczesnych CDN-ów obsługuje negocjację treści na podstawie nagłówka Accept, ale musisz to jawnie włączyć. Sprawdź dokumentację swojego CDN w sekcji „obsługa nagłówka Vary" lub „negocjacja treści". Niektóre CDN-y wymagają włączenia opcji „Cache by Accept header" w regułach buforowania. Bez tego CDN może zbuforować pierwszą wersję, którą zobaczy (JPEG lub WebP) i serwować ją wszystkim odwiedzającym niezależnie od wsparcia przeglądarki.

Ustawienia jakości obrazu

Wybór odpowiedniego ustawienia jakości WebP jest kluczowy. Zbyt wysoka jakość i tracisz korzyści z rozmiaru pliku; zbyt niska i obrazy produktów wyglądają nieostro lub wykazują artefakty kompresji — co jest niedopuszczalne w e-commerce.

Oto zalecane ustawienia jakości według typu obrazu:

• Obrazy produktów (duże widoki/widoki szczegółowe): Jakość 82-88. Zdjęcia produktów muszą wyglądać ostro, szczególnie dla przedmiotów, gdzie tekstura i detal mają znaczenie (moda, biżuteria, elektronika). Przy jakości 85 typowy obraz produktu 800x800 kompresuje się z ~120 KB (JPEG) do ~80 KB (WebP) bez widocznej utraty jakości.
• Banery kategorii i obrazy główne: Jakość 78-82. Są zazwyczaj oglądane w większych rozmiarach, ale z mniejszą uwagą na drobne detale.
• Miniatury i obrazy list: Jakość 75-80. Przy małych rozmiarach wyświetlania niższa jakość jest mniej zauważalna. Miniatura przy jakości 75 może być o 50-60% mniejsza od odpowiednika JPEG.
• Logo i grafiki z ostrymi krawędziami: Użyj bezstratnego WebP lub zachowaj jako PNG. Kompresja stratna tworzy widoczne artefakty wokół tekstu i grafik z ostrymi krawędziami.

PrestaShop stosuje jedno ustawienie jakości globalnie. Jeśli potrzebujesz różnych poziomów jakości dla różnych typów obrazów, musiałbyś zmodyfikować klasę ImageManager lub użyć modułu od zewnętrznego dewelopera, który zapewnia bardziej szczegółową kontrolę.

Strategie awaryjne (fallback)

Choć wsparcie przeglądarek dla WebP jest niemal uniwersalne w 2026 roku, wdrożenie strategii awaryjnej jest nadal uważane za najlepszą praktykę, szczególnie jeśli Twój sklep obsługuje klientów korzystających ze starszych urządzeń lub ograniczonych środowisk korporacyjnych.

Negocjacja treści po stronie serwera

Reguły .htaccess i Nginx opisane powyżej implementują negocjację treści po stronie serwera. To zalecane podejście, ponieważ jest transparentne dla warstwy aplikacji. Przeglądarka żąda oryginalnego URL-a, a serwer decyduje, który format dostarczyć na podstawie nagłówka Accept. Nie są wymagane żadne zmiany w szablonach ani kodzie front-endowym.

Element HTML Picture

Alternatywne podejście wykorzystuje element <picture>, aby pozwolić przeglądarce wybrać najlepszy format:

<picture>\n  <source srcset=\"image.webp\" type=\"image/webp\">\n  <img src=\"image.jpg\" alt=\"Nazwa produktu\">\n</picture>

To wymaga modyfikacji szablonów PrestaShop (Smarty lub Twig w zależności od wersji). Choć daje jawną kontrolę, jest bardziej inwazyjne i trudniejsze w utrzymaniu przy aktualizacjach szablonów. Negocjacja po stronie serwera jest ogólnie preferowana dla wdrożeń PrestaShop.

Wbudowany fallback PrestaShop

Gdy wybierzesz opcję „JPEG/PNG + WebP" w ustawieniach obrazów PrestaShop, system generuje oba formaty. PrestaShop 8.x obsługuje fallback automatycznie w swoich szablonach rdzeniowych, sprawdzając, czy plik WebP istnieje, zanim go poda. Jeśli używasz niestandardowego szablonu, zweryfikuj, że szablony obrazów produktów wspierają to podejście z podwójnym formatem.

Najczęstsze pułapki i jak je naprawić

1. Zepsute obrazy po włączeniu WebP

Najczęstszym problemem po włączeniu WebP są zepsute obrazy w całym sklepie. Zazwyczaj dzieje się tak, ponieważ:

• Pliki WebP nie zostały wygenerowane. Włączenie ustawienia wpływa tylko na nowo przesłane obrazy. Musisz kliknąć „Regeneruj miniatury", aby utworzyć wersje WebP istniejących obrazów. Dla dużych katalogów użyj polecenia CLI.
• Uprawnienia plików są nieprawidłowe. Użytkownik serwera webowego (zazwyczaj www-data) musi mieć uprawnienia do zapisu w drzewie katalogów img/. Po regeneracji zweryfikuj uprawnienia: find img/ -name \"*.webp\" -exec ls -la {} \\;
• Reguły .htaccess kolidują. Domyślny .htaccess PrestaShop zawiera reguły przepisywania, które mogą kolidować z regułami WebP. Umieść reguły WebP przed domyślnym blokiem przepisywania PrestaShop, aby zapewnić ich wcześniejsze przetwarzanie.

2. Brakujące rozszerzenia GD lub Imagick

Generowanie WebP wymaga, aby PHP miało bibliotekę GD lub rozszerzenie ImageMagick skompilowane ze wsparciem WebP. Aby sprawdzić:

php -r \"echo gd_info()['WebP Support'] ? 'GD WebP OK' : 'GD WebP BRAK';\"

Lub dla ImageMagick:

php -r \"echo in_array('WEBP', Imagick::queryFormats()) ? 'Imagick WebP OK' : 'Imagick WebP BRAK';\"

Jeśli wsparcie WebP jest niedostępne, musisz przekompilować PHP z odpowiednimi flagami lub zainstalować prawidłowe pakiety. Na Debian/Ubuntu: apt-get install libwebp-dev a następnie przekompilowanie rozszerzenia GD, lub instalacja wersji PHP zawierającej wsparcie WebP (PHP 7.4+ zazwyczaj zawiera je domyślnie).

Na hostingu współdzielonym, jeśli Twoja kompilacja PHP nie obsługuje WebP, skontaktuj się z dostawcą hostingu. Większość nowoczesnych środowisk hostingowych zawiera wsparcie WebP w instalacjach PHP 8.x.

3. Problemy z buforowaniem

Problemy związane z buforowaniem należą do najbardziej frustrujących kwestii WebP:

• Cache przeglądarki: Po włączeniu WebP przeglądarki mogą nadal wyświetlać buforowane wersje JPEG/PNG. Zalecaj użytkownikom twarde odświeżanie (Ctrl+Shift+R), ale problem rozwiązuje się sam, gdy buforowane obrazy wygasną.
• Cache po stronie serwera: Jeśli używasz Varnish, Redis lub jakiegokolwiek buforowania pełnych stron, cache musi zostać wyczyszczony po włączeniu WebP. W przeciwnym razie buforowane strony będą odwoływać się do starych URL-ów obrazów lub typów MIME.
• Cache CDN: Wyczyść cache CDN całkowicie po włączeniu WebP. Zwróć szczególną uwagę na klucze cache CDN — jeśli CDN nie różnicuje buforowania według nagłówka Accept, może serwować WebP przeglądarkom, które go nie obsługują (lub odwrotnie).
• OPcache: Jeśli zmodyfikowałeś pliki PHP w ramach włączania WebP (na przykład niestandardowe nadpisania ImageManager), zresetuj OPcache, aby upewnić się, że nowy kod zacznie działać.
• Cache Smarty PrestaShop: Wyczyść cache Smarty z panelu administracyjnego (Zaawansowane parametry > Wydajność) lub usuń zawartość katalogu var/cache/.

4. Nieprawidłowe typy MIME

Jeśli Twój serwer nie rozpoznaje rozszerzenia .webp, przeglądarki nie będą w stanie wyrenderować obrazów, mimo że pliki są prawidłowe. Upewnij się, że konfiguracja serwera zawiera prawidłowe mapowanie typu MIME: image/webp dla plików .webp. Dyrektywa AddType w sekcji Apache powyżej to obsługuje.

5. Problemy z przesyłaniem obrazów w panelu administracyjnym

Panel administracyjny PrestaShop waliduje przesyłane formaty obrazów. W niektórych wersjach bezpośrednie przesyłanie obrazu WebP przez edytor produktów może się nie powieść z błędem walidacji. Dzieje się tak, ponieważ biała lista walidatora przesyłania może nie zawierać WebP. Sprawdź dozwolone rozszerzenia w Zaawansowane parametry > Administracja lub odpowiedniej konfiguracji.

6. Niekompatybilność z modułami zewnętrznymi

Niektóre moduły zewnętrzne (szczególnie slidery, moduły galerii i moduły powiększania obrazów produktów) na sztywno zapisują rozszerzenia plików obrazów lub nie obsługują WebP. Po włączeniu WebP przetestuj wszystkie moduły wyświetlające obrazy. Typowe objawy to brakujące miniatury w modułach sliderów lub zepsuta funkcjonalność powiększania. Skontaktuj się z deweloperem modułu w sprawie aktualizacji lub upewnij się, że Twoja negocjacja treści po stronie serwera prawidłowo obsługuje fallback.

Testowanie dostarczania WebP

Po konfiguracji zweryfikuj, że obrazy WebP są faktycznie serwowane. Oto kilka metod:

Narzędzia deweloperskie przeglądarki

1. Otwórz swój sklep w Chrome lub Firefox.
2. Otwórz DevTools (F12) i przejdź do zakładki Sieć (Network).
3. Filtruj po typie Img.
4. Przeładuj stronę.
5. Kliknij na dowolne żądanie obrazu i sprawdź Nagłówki odpowiedzi (Response Headers). Content-Type powinien być image/webp.
6. Sprawdź również kolumnę Type na liście sieciowej — dla skonwertowanych obrazów powinna wyświetlać „webp".

Testowanie z linii poleceń

Użyj curl, aby zweryfikować, że negocjacja treści działa prawidłowo:

# Żądanie ze wsparciem WebP\ncurl -s -I -H \"Accept: image/webp,image/*\" https://twojsklep.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type\n# Oczekiwane: Content-Type: image/webp\n\n# Żądanie bez wsparcia WebP\ncurl -s -I -H \"Accept: image/jpeg\" https://twojsklep.com/img/p/1/2/3/456-home_default.jpg | grep Content-Type\n# Oczekiwane: Content-Type: image/jpeg

Narzędzia online

Google PageSpeed Insights i Lighthouse oznaczają obrazy, które nie są serwowane w formatach nowej generacji. Uruchom audyt Lighthouse na swoich stronach produktów — jeśli WebP jest prawidłowo skonfigurowany, nie powinieneś widzieć rekomendacji „Serve images in next-gen formats".

Wpływ na wydajność

Rzeczywisty wpływ WebP na wydajność sklepu PrestaShop zależy od wielkości katalogu i kompozycji stron, ale typowe poprawy obejmują:

• Redukcja łącznej wagi strony: 15-30% na stronach list produktów i 10-20% na stronach szczegółów produktów, gdzie obrazy stanowią większość pobieranych bajtów.
• Largest Contentful Paint (LCP): Poprawa średnio o 200-600ms, ponieważ główny obraz produktu ładuje się szybciej. To jedna z trzech metryk Core Web Vitals, która bezpośrednio wpływa na pozycje w wyszukiwarkach.
• Time to Interactive (TTI): Marginalna poprawa, ponieważ ładowanie obrazów konkuruje z wykonywaniem JavaScript o przepustowość, ale nie o CPU.
• Oszczędności przepustowości serwera: Dla sklepu obsługującego 100 000 odsłon miesięcznie, WebP może zmniejszyć miesięczne zużycie przepustowości o 20-50 GB, potencjalnie obniżając koszty hostingu.
• Wydajność mobilna: Największe zyski są na połączeniach mobilnych, gdzie mniejsze rozmiary obrazów przekładają się bezpośrednio na szybsze czasy ładowania w sieciach 4G/5G. Indeksowanie Google mobile-first czyni to szczególnie ważnym.

Pamiętaj, że generowanie WebP dodaje obciążenie CPU podczas przetwarzania obrazów (przesyłanie i regeneracja). Na słabszym hostingu współdzielonym regeneracja miniatur dla dużego katalogu może tymczasowo spowolnić serwer. Planuj regenerację w okresach niskiego ruchu.

Lista kontrolna podsumowująca

Aby pomyślnie wdrożyć WebP w swoim sklepie PrestaShop, postępuj według tej listy kontrolnej:

1. Zweryfikuj, że PHP ma GD lub ImageMagick ze wsparciem WebP.
2. Włącz generowanie WebP w ustawieniach obrazów PrestaShop (użyj JPEG/PNG + WebP dla bezpieczeństwa).
3. Ustaw jakość na 82-85 dla optymalnej równowagi.
4. Regeneruj wszystkie miniatury (użyj CLI dla dużych katalogów).
5. Dodaj reguły negocjacji treści po stronie serwera (.htaccess lub konfiguracja Nginx).
6. Skonfiguruj CDN do różnicowania cache według nagłówka Accept.
7. Wyczyść wszystkie pamięci podręczne (przeglądarka, serwer, CDN, Smarty, OPcache).
8. Przetestuj dostarczanie za pomocą DevTools przeglądarki i curl.
9. Zweryfikuj, że moduły zewnętrzne prawidłowo wyświetlają obrazy.
10. Uruchom audyt Lighthouse, aby potwierdzić brak ostrzeżeń o „formatach nowej generacji".

WebP nie jest już opcjonalny w konkurencyjnym e-commerce. Dzięki wbudowanemu wsparciu PrestaShop i prostej konfiguracji serwera nie ma powodu, aby dalej serwować przerosłe pliki JPEG i PNG. Konfiguracja zajmuje mniej niż godzinę, a korzyści wydajnościowe są natychmiastowe i mierzalne.