Jeśli testowałeś swój sklep Prestashop za pomocą takich narzędzi jak Google Pagespeed Insight czy GTMetrix to być może otrzymałeś zalecenie "Koduj obrazy wydajnie" lub "Rozprowadzaj obrazy w formatach nowej generacji". Jeśli tak, to ten artykuł jest dla Ciebie, wyjaśniam jak wybrać odpowiedni moduł Prestashop do kompresji obrazów do formatu WEBP.

Optymalizacja obrazu, dlaczego warto to robić?

To chyba pierwsze pytanie, które należy zadać! Optymalizacja obrazu pozwala na zmniejszenie jego rozmiaru / wagi, a co za tym idzie szybkość ładowania strony będzie szybsza. Format WEBP pozwala zoptymalizować pliki PNG i JPG stron internetowych i zmniejszyć ich rozmiar średnio o 30%, jest to tym bardziej ważne na telefonach komórkowych, gdzie połączenie internetowe jest wolniejsze. Niekoniecznie zyskasz na SEO, ale ponieważ strony ładują się szybciej, Twoi klienci będą chętniej robić zakupy online!

Czy moduł kompresuje wszystkie zdjęcia?

Niektóre moduły będą kompresować tylko obrazy produktów, kategorii, marek i dostawców. Obrazy motywów lub modułów nie będą korzystać z optymalizacji WEBP. Zaznacz ten punkt przy wyborze modułu Prestashop WEBP.

Czy konieczne jest zainstalowanie konkretnego rozszerzenia PHP?

Sprawdź, jak moduł kompresuje obrazy. Potrzebuje jednej z następujących sprężarek:

Cwebp binaries: jest to program dostarczany przez Google, niektóre moduły instalują go, ale nie zawsze są one kompatybilne z serwerami (odmowa uprawnień lub niekompatybilne procesory)
Vips PHP extension: jest to rozszerzenie PHP nie często występujące na standardowym hostingu
Imagick PHP extension: jest to rozszerzenie PHP, które nie jest często obecne na standardowym hostingu
Gmagick rozszerzenie PHP: jest to rozszerzenie PHP, które nie jest często obecne na standardowym hostingu
Gd rozszerzenie PHP: jest to rozszerzenie PHP, które jest często obecne na hostingu, ale nie zawsze jest skompilowane z opcją WEBP

Niektóre moduły korzystają z zewnętrznej usługi optymalizacji obrazu, takiej jak ewww.io.

Z mojego doświadczenia wynika, że najbardziej wydajnym kompresorem WEBP jest rozszerzenie GD. Binarny Google jest często znacznie wolniejszy (x10) niż GD.

Co się stanie, jeśli przeglądarka (np. Safari) nie odczyta formatu WEBP?

Upewnij się, że moduł zwraca oryginalny (nieskompresowany) obraz, jeśli przeglądarka nie może odczytać WEBP. Na przykład przeglądarki Safari (iPhony/Apple) będą ją obsługiwać dopiero od wersji 16! Jest na to bardzo prosty sposób, wszystkie przeglądarki informują serwer jaki format może odczytać za pomocą nagłówka 'Accept', jeśli nie ma tam 'image/webp' to zwróć nieskompresowany obraz.

Sprawdź również, czy moduł modyfikuje adresy URL obrazów, czy nie (modyfikując rozszerzenie .JPG na przykład na .WEBP). Jeśli nie modyfikuje ich (jest to lepsze dla modułów HTML cache), musi oferować możliwość zrobienia tego, ponieważ niektóre CDN-y (proxy), takie jak Cloudflare, nie zarządzają nagłówkiem 'Vary: Accept'.

Jak kompresowane są stare i nowe obrazy?

Istnieją dwie strategie:

  1. moduł kompresuje zdjęcia za każdym razem, gdy dodajesz je przez zaplecze, w takim przypadku kompresja zdjęć znajdujących się już w sklepie będzie trwała bardzo długo.
  2. moduł kompresuje obrazy w formacie WEBP przy pierwszym wyświetleniu, w tym przypadku nie jest wymagane żadne większe przetwarzanie, obrazy są kompresowane tylko wtedy, gdy są używane i przy pierwszym wyświetleniu w przeglądarce

Czy możemy wybrać jakość zdjęć?

Format WEBP jest "stratny", tzn. wraz z utratą danych, jakość obrazów ulega pogorszeniu, ale można dostosować stopień kompresji tak, aby ta utrata jakości nie była widoczna gołym okiem. Sprawdź, czy moduł WEBP umożliwia wybór tego stopnia kompresji, abyś mógł samodzielnie określić wymaganą jakość.

Wniosek

Teraz już wiesz, jakie pytania powinieneś sobie zadać, aby wybrać moduł kompresji Prestashop WEBP.

Powinieneś wiedzieć, że nasz moduł Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) oferuje kompresję WEBP z Page Cache Ultimate lub możesz przejść do samodzielnego modułu Kompresja WEBP kompatybilnego z Prestashop 1.6.