CTW Image Optimizer PRO – AVIF, WebP, lazy-load i PageSpeed
Kreator jednym kliknięciem zamienia zdjęcia sklepu na AVIF i WebP, dodaje lazy-load i brakujące wymiary obrazów, a potem pokazuje wynik Google PageSpeed przed i po. Adresy obrazów, motyw i oryginały zostają bez zmian.
O module
Zdjęcia to zwykle największa część każdej strony sklepu, a PageSpeed od lat podpowiada to samo: nowoczesne formaty, odroczone ładowanie obrazów poniżej pierwszego ekranu i wymiary, dzięki którym strona nie „skacze”. CTW Image Optimizer PRO robi te trzy rzeczy w jednym module i pokazuje efekt w liczbach.
Moduł tworzy obok każdego zdjęcia kopie AVIF i WebP (np. 1-home_default.jpg.avif i .webp) i podaje przeglądarce najlepszy format, który obsługuje: AVIF, potem WebP, a na końcu oryginał. AVIF jest zwykle o 20–30% mniejszy niż WebP. Do HTML-a sklepu dodaje lazy-load, decoding="async" i brakujące atrybuty width i height. Na demonstracyjnym sklepie PrestaShop waga zdjęć spadła z 7,44 MB do 1,87 MB w AVIF (o 75%) i do 2,40 MB w WebP.
Jak to działa
- Zainstaluj moduł. Jeśli masz wersję Basic, PRO wyłączy ją automatycznie i przejmie jej reguły.
- Uruchom kreator „Zoptymalizuj sklep”: pięć kroków, jedno kliknięcie, z paskiem postępu konwersji i rozmiaru przed i po.
- Porównaj wynik Google PageSpeed (wynik, LCP, CLS, waga strony) i wagę obrazów na stronie głównej, w kategorii i na produkcie przed i po.
- Ustaw cron (URL albo CLI), żeby nowe miniatury, kategorie i importy były optymalizowane same. Nowe zdjęcia produktów są konwertowane od razu po wgraniu.
Dla kogo
- Sklepy, którym zależy na wyniku PageSpeed i Core Web Vitals (LCP, CLS).
- Właściciele sklepów bez wiedzy technicznej: kreator prowadzi krok po kroku, a komunikaty są napisane prostym językiem.
- Duże katalogi: konwersja działa partiami po ok. 8 sekund i wznawia się po przerwaniu, przetestowana na ok. 20 000 zdjęć.
- Agencje, które chcą pokazać klientowi wynik „przed i po” w liczbach.
Wymagania i ograniczenia
AVIF wymaga PHP 8.1+ z GD skompilowanym z libavif albo ImageMagick 7 z koderem AVIF. Moduł sam to sprawdza, a bez AVIF działa z WebP, który daje większość zysku. Pomiar PageSpeed wymaga publicznie dostępnego sklepu (nie localhost i nie tryb konserwacji); przy wielu pomiarach warto wkleić darmowy klucz Google PageSpeed API. Na serwerze z samym nginx reguły serwowania trzeba dodać ręcznie, gotowy fragment konfiguracji jest w panelu. Moduł nie zmienia rozmiarów zdjęć, nie kompresuje oryginałów JPG i nie przepisuje adresów na CDN.
Co rozwiązuje
-
Niski wynik PageSpeed przez zdjęcia
Google wskazuje nowoczesne formaty obrazów, odroczone ładowanie i brak wymiarów, a każda z tych poprawek to osobna praca w motywie.
-
Strona „skacze” podczas ładowania
Obrazy bez width i height przesuwają treść, co pogarsza CLS i irytuje klientów na telefonach.
-
WebP to nie wszystko
AVIF jest zwykle o 20–30% mniejszy niż WebP, ale trzeba go wygenerować, sprawdzić, czy serwer go obsługuje, i podawać tylko przeglądarkom, które go rozumieją.
-
Optymalizacja wymaga wiedzy technicznej
Konwersja, reguły serwera, lazy-load i pomiary to kilka narzędzi i sporo konfiguracji, na którą właściciel sklepu nie ma czasu.
-
Brak dowodu, że to działa
Bez pomiaru przed i po trudno ocenić efekt i pokazać go klientowi albo szefowi.
Najważniejsze funkcje
-
Kreator „Zoptymalizuj sklep”
Pięć kroków i jedno kliknięcie: sprawdzenie serwera, pomiar „przed”, włączenie AVIF, WebP i lazy-loadu, konwersja obrazów i pomiar „po”. Pasek postępu konwersji i pasek rozmiaru przed i po pokazują, co się dzieje.
-
AVIF i WebP z automatycznym wyborem
Kopie AVIF i WebP obok oryginałów, a przeglądarka dostaje najlepszy obsługiwany format: AVIF, potem WebP, na końcu oryginał. Adresy obrazów i motyw się nie zmieniają, nagłówek Vary: Accept chroni cache i CDN.
-
Lazy-load i brakujące wymiary
Obrazy poniżej pierwszego ekranu ładują się dopiero przy przewijaniu, dostają decoding=„async” i brakujące width i height, dzięki czemu strona nie skacze i ma lepszy CLS. Bez zmian w szablonach.
-
Google PageSpeed przed i po
Wynik, LCP, CLS i waga strony przed optymalizacją i po niej. Pomiar „przed” działa także na już zoptymalizowanym sklepie: moduł na chwilę wyłącza optymalizację i sam ją przywraca po 5 minutach.
-
Waga obrazów na stronach sklepu
Ile ważą obrazy na stronie głównej, w kategorii i na karcie produktu w wersji oryginalnej, AVIF i WebP, plus lista obrazów bez lazy-load i bez wymiarów.
-
Szybciej na dużych katalogach
Opcja pomijania oryginałów zdjęć produktów, których sklep nie wyświetla, przyspiesza konwersję mniej więcej dwukrotnie i oszczędza miejsce na dysku. Konwersja działa partiami i wznawia się po przerwaniu.
-
Diagnostyka AVIF prostym językiem
Moduł sprawdza AVIF prawdziwym kodowaniem, a gdy serwer go nie obsługuje, pokazuje prosty komunikat z szacowanym zyskiem w MB. Szczegóły techniczne są zwinięte dla administratora, a „Sprawdź ponownie” pozwala zweryfikować serwer po zmianach.
-
Wszystko z wersji Basic
Panel oszczędności z wynikami dla każdego typu obrazów, konwersja nowych zdjęć zaraz po wgraniu, cron przez URL i CLI (także w trybie konserwacji), test serwowania jednym kliknięciem, gotowa konfiguracja nginx i narzędzia serwisowe.
-
Oryginały nigdy nie są zmieniane
Moduł tylko dodaje pliki .avif i .webp. Ponowna optymalizacja zawsze startuje od oryginału, a nowy plik zastępuje stary dopiero po zapisaniu w całości.
Najczęstsze pytania
Które wersje PrestaShop są obsługiwane?
PrestaShop od 1.7 do 9.x, na PHP od 5.6 do 8.4. AVIF wymaga PHP 8.1 lub nowszego.
Kiedy działa AVIF?
Gdy PHP ma GD skompilowane z libavif (PHP 8.1+) albo ImageMagick 7 z koderem AVIF; sama wersja PHP nie wystarcza. Moduł sprawdza to przy instalacji i w panelu. Bez AVIF działa z WebP, który daje większość zysku.
Czy moduł zmienia moje oryginalne zdjęcia lub motyw?
Nie. Obok oryginału tworzy pliki .avif i .webp, a adresy obrazów i szablony zostają bez zmian. Lazy-load i wymiary są dodawane do HTML-a w locie.
Mam wersję Basic. Co z nią?
PRO po instalacji automatycznie wyłącza Basic i przejmuje serwowanie. Istniejące pliki WebP zostają, PRO dodaje tylko AVIF.
Dlaczego PageSpeed nie mierzy?
Sklep musi być publicznie dostępny, nie na localhost i nie w trybie konserwacji. Bez własnego klucza API Google często odrzuca zapytania ze względu na wspólny dzienny limit, dlatego w ustawieniach zaawansowanych możesz wkleić darmowy klucz Google PageSpeed API.
Co przy bardzo dużej liczbie zdjęć?
Konwersja działa partiami po ok. 8 sekund, bez ryzyka timeoutu. Postęp zapisuje się w bazie, więc po zamknięciu karty moduł kontynuuje od miejsca przerwania, a w tle tę samą pracę wykonuje cron. Przetestowane na ok. 20 000 zdjęć.
Czy działa w trybie konserwacji i na nginx?
W trybie konserwacji panel, konwersja, serwowanie i cron działają normalnie. Na Apache działa od razu, na samym nginx trzeba dodać fragment konfiguracji z panelu.
Co obejmuje licencja?
Jednorazowy zakup dla jednej domeny produkcyjnej, domeny testowe bez ograniczeń, 12 miesięcy aktualizacji i wsparcia. Po tym czasie moduł działa dalej, tylko bez nowych wersji.
Zgodność i warunki
- Kompatybilność
- PS 1.7 – 9.x
- PHP
- 5.6+
- PrestaShop
- 1.7 – 9.x
- PHP
- 5.6 – 8.4 (AVIF: 8.1+)
- Formaty
- AVIF, WebP
- Serwer
- Apache (.htaccess) lub nginx
- Wsparcie
- 12 miesięcy
- Typ licencji
- Jednorazowy zakup, 1 domena, 12 miesięcy aktualizacji
- Dla kogo
- Sklepy PrestaShop 1.7–9.x, agencje