Optymalizacja obrazów w Prestashop - autokonwersja do WEBP

Optymalizacja obrazów to jedno z najważniejszych zadań przy przyspieszaniu sklepów internetowych. W teorii PrestaShop od lat wspiera WebP, ale w praktyce… tylko częściowo.

System wciąż nie potrafi automatycznie konwertować wszystkich grafik — szczególnie tych pochodzących z modułów, banerów, sliderów czy szablonów. Efekt? Sklep może mieć ładny design, szybki hosting i dobry kod, ale w PageSpeed Insights dalej spadasz na największej przeszkodzie: zbyt ciężkich obrazach JPG/PNG.

Przez lata jedynym wyjściem były modyfikacje pliku .htaccess, różne reguły dla Apache i nginx, serwerowe moduły typu mod_pagespeed czy dodatkowe konfiguracje, które… po aktualizacji Presta potrafiły po prostu przestać działać. Do tego dochodzą rozszerzenia zależne od hostingu, wymagające wsparcia WebP po stronie serwera — co na shared hostingach często bywa niemożliwe. W rezultacie właściciele sklepów zostawali z kilkoma modułami WebP, z których każdy działał „trochę”, a żaden nie potrafił obsłużyć całości sklepu bez ryzyka błędów.

Właśnie dlatego powstał DC WebP – moduł zaprojektowany tak, aby działał zawsze, bez względu na hosting, serwer, konfigurację lub wersję PrestaShop. Bez edycji .htaccess. Bez reguł nginx. Bez dodatkowych bibliotek. DC WebP konwertuje obrazy dynamicznie, przechwytując gotowy HTML i inteligentnie podmieniając każdy JPG i PNG na WebP – od zdjęć produktów po bannery, slider, logo i grafiki modułów. Prosto, bezpiecznie i tak, jak PrestaShop powinien robić to od początku.

To właśnie takie techniczne detale pokazują, że skuteczne budowanie sklepów internetowych wymaga myślenia o wydajności całościowo — nie tylko na poziomie serwera czy kodu, ale też każdego obrazu ładowanego w przeglądarce.

 

Dlaczego WebP jest absolutnym standardem w 2025?

Format WebP stał się złotym standardem dla wszystkich sklepów internetowych — niezależnie od platformy. To nie jest już „opcja” ani dodatkowa ciekawostka. To fundament szybkiego ładowania stron, wysokich wyników w PageSpeed i lepszych pozycji SEO. Google oficjalnie rekomenduje WebP jako preferowany format graficzny, ponieważ znacząco zmniejsza wagę plików, a tym samym poprawia kluczowe wskaźniki wydajności, takie jak LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) czy INP (Interaction to Next Paint). Innymi słowy — WebP sprawia, że sklep ładuje się szybciej, jest bardziej responsywny i lepiej oceniany przez algorytmy.

Różnica między JPG/PNG a WebP jest ogromna. Przeciętny baner JPG o wadze 400–600 KB po konwersji spada do 80–150 KB. Slajdery home page, które często mają po kilka obrazów, potrafią zrzucić nawet 70–80% wagi. Zdjęcia produktów — kluczowy element każdego sklepu — zamiast 100 KB ważą często 25–40 KB. W praktyce oznacza to, że cała strona główna, kategoria czy karta produktu potrafi ładować się o kilka sekund szybciej, co bezpośrednio przekłada się na większą sprzedaż.

Dlaczego to takie ważne? Ponieważ PageSpeed Insights w 2025 roku nie wybacza ciężkich grafik. Każdy dodatkowy kilobajt obniża wyniki, a tym samym widoczność w Google. WebP daje natychmiastowy, widoczny efekt: lepsze wskaźniki Core Web Vitals, szybsze ładowanie mobilne, większy komfort użytkownika i poprawę konwersji. To dlatego WebP jest dziś nie tylko standardem — jest jednym z najprostszych i najbardziej opłacalnych sposobów na przyspieszenie całego sklepu.

Warto przeczytać: Optymalizacja i obróbka zdjęć dla sklepu internetowego - kompedium wiedzy plus przydatne programy

 

Problemy z istniejącymi modułami WebP dla PrestaShop

Choć na rynku jest wiele modułów WebP dla PrestaShop, większość z nich ma jedną wspólną cechę: działają „pod warunkiem”, że Twój serwer, hosting i konfiguracja sklepu im na to pozwolą. W praktyce daje to więcej frustracji niż efektów. Najczęściej spotykane problemy wyglądają tak samo:

Wymagają edytowania .htaccess – czyli ręcznej ingerencji w reguły serwera. Jeżeli masz shared hosting, pliku .htaccess nawet nie możesz edytować, a jeśli możesz — wystarczy jedna literówka, by położyć cały sklep. Dodatkowo po każdej regeneracji przyjaznych URL PrestaShop potrafi nadpisać plik i usunąć Twoje zmiany.

Nie działają na shared hostingach – wiele modułów wymaga rozszerzeń serwerowych, takich jak mod_rewrite, mod_headers, proxy_fcgi czy wsparcia WebP na poziomie Apache lub nginx. Na tanich hostingach jest to po prostu niedostępne, co sprawia, że moduł nie działa mimo poprawnej instalacji.

Blokują obrazki produktów, jeśli serwer nie ogarnie WebP – niektóre rozwiązania BLOKUJĄ oryginalne JPG/PNG, wymuszając WebP. Jeśli hosting nie obsługuje formatu lub nagle przestanie, w sklepie pojawiają się „puste” obrazki albo błędy 404. Klasyczny scenariusz: PageSpeed pokazuje dobre wyniki, ale klient widzi sklep bez zdjęć.

Przestają działać po aktualizacji PrestaShop lub PHP – moduły oparte o reguły serwerowe czy override’y bardzo często psują się po każdej większej aktualizacji. Nowa wersja PS, nowe Friendly URLs, nowa wersja PHP… i WebP znika. Efekt? Zdjęcia nie działają, a debugowanie zajmuje godziny.

Konflikty z CDN i Friendly URLs – jeżeli używasz Cloudflare albo KeyCDN, wiele modułów WebP przestaje działać, bo CDN nie rozpoznaje dynamicznych reguł .htaccess. Do tego dochodzą problemy z URL produktu typu
/21-home_default/brown-bear.jpg → po konwersji nie są prawidłowo przekierowywane.

To wszystko sprawia, że większość rozwiązań WebP działa dobrze… ale tylko w idealnych warunkach. W praktyce użytkownicy trafiają na problemy, które nie powinny istnieć w 2025 roku.

I właśnie tutaj pojawia się DC WebP – moduł, który rozwiązuje każdy z powyższych problemów dzięki zupełnie innemu podejściu: konwersji i podmianie obrazów na poziomie HTML, bez ingerencji w serwer, konfigurację, CDN czy strukturę PrestaShop.

 

Jak działa DC WebP – technologia

DC WebP nie próbuje „walczyć” z PrestaShop ani modyfikować jej wewnętrznych funkcji. Nie dotyka też serwera, nie zmienia .htaccess, nie robi override’ów i nie generuje obrazów w tle. Zamiast tego wykorzystuje prosty, ale genialnie skuteczny mechanizm: konwertuje tylko to, co faktycznie jest wyświetlane — i tylko raz. A potem już zawsze serwuje wersję WebP z własnego cache.

Poniżej pełna architektura działania modułu:

1. Konwersja WebP „on first display” (przy pierwszym wyświetleniu)

Zamiast generować tysiące WebP na zapas (co robi PrestaShop), DC WebP robi to bardziej inteligentnie:

• brak kolejkowania — nie używamy tasków, workerów ani kolejek obrazów, bo nie ma takiej potrzeby

• brak CRON — moduł nie wymaga żadnych zadań cyklicznych, żadnych skryptów w tle

• pełna automatyzacja — pierwsze wejście użytkownika na stronę automatycznie generuje brakujące WebP dla tylko tych obrazów, które są faktycznie użyte w HTML

Efekt?
Moduł „uczy się” sklepu na podstawie ruchu naturalnego, zamiast marnować zasoby serwera na konwersję całej bazy zdjęć.

 

2. Jedno lekkie przetwarzanie, potem cache

DC WebP generuje WebP tylko jeden jedyny raz — przy pierwszym użyciu danego obrazka.

Co dzieje się dalej?

• generacja WebP tylko raz — wygenerowany plik trafia od razu do lokalnego cache modułu

• tworzenie własnego katalogu cache — /modules/dc_pswebp/cache/

• przy kolejnych wyświetleniach serwer nie wykonuje żadnej konwersji

Każde następne wejście użytkownika:

✔️ sprawdza, czy WebP istnieje
✔️ jeśli tak — podmienia ścieżkę w locie
✔️ zero pracy procesora, zero kompresji, zero opóźnień

Takiej lekkości nie osiąga żaden inny moduł WebP dla PrestaShop.

 

3. Inteligentne przechwytywanie HTML

Sercem modułu jest jeden, jedyny hook:

actionOutputHTMLBefore

To moment, w którym:

• cała strona jest już wygenerowana,

• obrazy mają swoje finalne URL,

• HTML jeszcze nie został wysłany do przeglądarki.

Właśnie tutaj DC WebP robi swoje magia:

• podmiana src — np. product.jpg → product.webp

• podmiana data-full-size-image-url — np. galerii produktów

• podmiana dotyczy absolutnie wszystkiego:

A wszystko to jednym algorytmem, jedną metodą, jednym przetwarzaniem — bez konfliktów, bez hacków, bez ingerencji w strukturę PrestaShop.

 

Funkcje modułu DC WebP

DC WebP został zaprojektowany tak, aby działał zawsze, wszędzie i z każdym motywem PrestaShop. Zero komplikacji, zero konfliktów – czysta automatyzacja, która realnie przyspiesza sklep.

 

Obsługuje wszystkie obrazy

Moduł nie ogranicza się do jednego katalogu PrestaShop — przechwycuje każdy <img> i automatycznie tworzy dla niego WebP.

✔️ zdjęcia produktów (wszystkie rozmiary i warianty)
✔️ homepage sliders (ps_imageslider, creative slider, owl slider, moduły premium)
✔️ banery i moduły zewnętrzne – pracuje z dowolnym modułem dodającym <img>
✔️ grafiki statyczne – np. /themes/.../assets/img/...
✔️ logo sklepu, favicony PNG, ikony CTA
✔️ obrazy w szablonie – niezależnie od lokalizacji i struktury URL

Nie ma znaczenia:

• czy obraz jest w /img/p/ (produkty),

• czy w /modules/.../img/,

• czy w /themes/.../assets/,

• czy ma parametry typu ?12345,

• czy ma Friendly URL jak: /21-home_default/nazwa-produkty.jpg.

DC WebP obsługuje wszystko.

 

Własny folder cache

Zamiast „psuć” strukturę PrestaShop lub nadpisywać oryginalne pliki WebP, moduł ma wydzielony katalog cache:

🔹 brak ingerencji w folder /img/p/
🔹 brak nadpisywania zdjęć produktów
🔹 pełna zgodność z każdą aktualizacją PrestaShop
🔹 działa z wersjami 8.x i 9.x bez żadnych zmian w kodzie

Takie odseparowanie gwarantuje 100% bezpieczeństwa oraz brak kolizji z motywami, modułami i CDN.

 

Panel ustawień

Moduł jest minimalistyczny i maksymalnie praktyczny. Administrator widzi tylko najważniejsze opcje:

✔️ Jakość WebP (1–100)

Ustawiasz raz, moduł stosuje kompresję do każdego generowanego WebP.

✔️ Wyczyść cache jednym kliknięciem

Usuwa wszystkie wygenerowane WebP — przydatne po zmianie jakości lub migracji obrazów.

✔️ Brak zbędnych opcji

DC WebP nie potrzebuje konfiguracji serwera, map konwersji, reguł rewrite, CRON ani override’ów.
Działa sam, od momentu aktywacji.

 

Najwyższa kompatybilność

Moduł działa absolutnie wszędzie — niezależnie od hostingu, serwera i konfiguracji.

✔️ shared hosting (najcięższe przypadki, zero htaccess)
✔️ Apache
✔️ nginx
✔️ LiteSpeed / OpenLiteSpeed
✔️ Cloudflare proxy / CDN
✔️ bez mod_pagespeed
✔️ bez mod_rewrite WebP rules
✔️ bez edytowania .htaccess

DC WebP nie polega na serwerze — działa wyłącznie w PHP.
Dlatego daje stabilność, której nie zapewnia żaden moduł konwertujący WebP „przez serwer”.

 

Porównanie przed i po – realne efekty

DC WebP nie jest „kolejnym modułem do obrazków”, tylko realnym boosterem wydajności. Różnice w wadze plików są widoczne natychmiast — bez zmian w szablonie, bez regenerowania miniatur, bez CRON-a.

Poniżej przykładowa tabela z faktycznych wyników konwersji:

To właśnie te pliki najczęściej pojawiają się na każdej stronie sklepu — ich odchudzenie daje spektakularny efekt:

Lighthouse / PageSpeed Insights — co się poprawia?

✔️ LCP (Largest Contentful Paint)
Slider i główne zdjęcie produktu wczytują się zauważalnie szybciej.

✔️ CLS (Cumulative Layout Shift)
Zmniejszona waga sprawia, że obrazy renderują się stabilniej.

✔️ INP / FID (responsywność interfejsu)
Mniej transferu = szybciej dostępne JS i CSS.

✔️ Total Blocking Time
Mniej zasobów do pobrania → krótszy czas blokowania.

✔️ Overall Performance Score: +10 do +30 punktów
W zależności od motywu i rozmiarów grafik.

 

Instalacja i konfiguracja modułu

DC WebP został zaprojektowany tak, aby każdy — nawet osoba bez technicznej wiedzy — mogła go zainstalować i uruchomić w mniej niż minutę. Bez zmian w serwerze, bez modyfikacji szablonu, bez edytowania .htaccess.

0 

1. Instalacja ZIP

1. Wejdź w panel PrestaShop → Moduły → Menedżer modułów

2. Kliknij „Prześlij moduł”

3. Wskaż plik ZIP modułu dc_pswebp.zip

4. Zatwierdź instalację — gotowe

Moduł od razu zaczyna działać, nie wymaga żadnych dodatkowych kroków.

 

2. Ustaw jakość WebP

Po instalacji wejdź w Konfiguruj i ustaw jakość WebP.

Rekomendacja:

• 80–90 – najlepszy balans między jakością a wagą pliku

• 90 – idealne dla zdjęć produktów

• 75 – dla bardzo dużych bannerów, gdy chcesz maksymalnej redukcji wagi

Moduł sam zajmuje się resztą — generuje WebP tylko raz, przy pierwszym wyświetleniu.

 

3. Wyczyść cache po zmianie jakości

Jeśli zmienisz jakość WebP, kliknij:

👉 „Wyczyść cache”

Moduł:

• usuwa wszystkie wcześniej wygenerowane pliki .webp

• generuje je od nowa przy pierwszym wyświetleniu

To idealne, lekkie rozwiązanie — bez „regeneruj miniatury” i bez obciążania serwera.

 

4. Ciesz się automatycznym WebP

Od tego momentu cały sklep:

• produkty

• slider

• moduły

• bannery

• zdjęcia szablonu

…będzie serwował automatyczne WebP, bez ingerencji w strukturę Presty czy serwera.

Po prostu działa. Na każdym hostingu.

 

Częste pytania (FAQ)

Poniżej znajdziesz odpowiedzi na najczęściej zadawane pytania dotyczące modułu DC WebP. Moduł został zaprojektowany tak, aby działał w każdym sklepie PrestaShop — bez bólu, bez ryzyka i bez ingerencji w bazę czy kod.

 

• Czy moduł usuwa oryginalne zdjęcia?

Nie.
DC WebP nigdy nie rusza oryginalnych plików JPG/PNG.
WebP są generowane obok, w osobnym folderze cache, a oryginały pozostają nietknięte. To gwarantuje pełne bezpieczeństwo.

 

• Czy moduł działa z watermarkami?

Tak.
Jeśli Twój sklep generuje miniatury z watermarkami, DC WebP będzie konwertował już oznakowane obrazy.
Nic nie zmienia w procesie generowania miniatur – tylko optymalizuje efekt końcowy.

 

• Czy moduł działa ze wszystkimi motywami?

Tak — ze 100% motywów.
Bo moduł nie integruje się ze szablonem, tylko z finalnym HTML strony.
To oznacza:

• działa z Classic

• działa z Warehouse

• działa z Transformer

• działa z Panda

• działa z każdym customowym motywem

Jeśli motyw wyświetla obraz — DC WebP go zoptymalizuje.

 

• Czy trzeba ingerować w .htaccess?

Nigdy.
Moduł działa:

• bez mod_pagespeed

• bez rewrite rules

• bez konwersji po stronie serwera

• bez zależności od Apache/nginx/LiteSpeed

To w 100% czysto-PHP rozwiązanie zgodne z każdym hostingiem.

 

• Czy moduł wspiera multistore?

Tak.
Moduł działa poprawnie w instalacjach wielosklepowych:

• osobne cache WebP dla każdego sklepu

• respektuje różne domeny i poddomeny

• działa na różnych motywach przypisanych do sklepów

Nic nie trzeba konfigurować — multistore działa automatycznie.

 

Podsumowanie

DC WebP to dziś najprostszy i najbardziej niezawodny sposób, aby wdrożyć WebP w sklepie PrestaShop — niezależnie od wersji, serwera czy motywu.
To moduł, który po prostu działa:

• DC WebP to najszybsze i najprostsze rozwiązanie WebP dla PrestaShop — instalujesz, ustawiasz jakość i zapominasz o problemie.

• Działa wszędzie, bez kombinacji z .htaccess, bez zależności od serwera i bez ryzyka blokady obrazów.

• Zero konfiguracji, zero konfliktów — moduł sam przechwytuje HTML i inteligentnie podmienia wszystkie obrazki na WebP.

• Gigantyczny boost dla PageSpeed i konwersji — lżejsze obrazki oznaczają szybszy sklep, lepsze LCP, wyższe oceny Lighthouse i realny wzrost sprzedaży.

Jeżeli chcesz, przygotuję teraz opis na GitHub, opis produktu do sklepu, albo baner promocyjny 1500×1000 px pod DC WebP.