Zdjęcia produktów są kluczowe dla decyzji zakupowej, ale są też najcięższe jeśli chodzi o rozmiar danych. Nieoptymalizowane obrazy to jeden z najczęstszych powodów niskich wyników PageSpeed i wolnego ładowania sklepu na urządzeniach mobilnych.
Format WebP
WebP to format obrazu opracowany przez Google, który przy zbliżonej jakości wizualnej waży o 25-35% mniej niż JPEG i o 25% mniej niż PNG. Wszystkie nowoczesne przeglądarki obsługują WebP. W PrestaShop 8 wsparcie dla WebP jest wbudowane i można je włączyć w ustawieniach obrazów. Konwersja istniejącego katalogu zdjęć do WebP to zazwyczaj wyraźne przyspieszenie bez widocznej straty jakości.
Rozmiary i generowanie miniatur
PrestaShop generuje zestawy miniatur produktowych w różnych rozmiarach na podstawie konfiguracji w panelu (Wygląd i Motywy). Zdjęcie produktu w siatce kategorii nie powinno być tym samym plikiem co zdjęcie na stronie produktu z możliwością przybliżenia. Każdy rozmiar powinien być osobno wygenerowany pod konkretne zastosowanie.
Lazy loading
Obrazy poniżej fold - te, których użytkownik jeszcze nie widzi - nie powinny być ładowane od razu. Lazy loading odkłada wczytanie obrazu do momentu, gdy zbliży się do widocznego obszaru. Atrybut loading="lazy" na elementach img jest obsługiwany natywnie przez przeglądarki. W PrestaShop 8 jest to domyślnie włączone, w starszych wersjach wymaga konfiguracji szablonu.
CDN dla obrazów
Cloudflare, Bunny.net lub AWS CloudFront serwują obrazy z serwera geograficznie bliskiego klientowi. Redukuje to latencję, szczególnie przy sprzedaży zagranicznej. CDN buforuje obrazy przez długi czas, zmniejszając obciążenie serwera aplikacji. Dla dużych katalogów z tysiącami zdjęć, przeniesienie obrazów na CDN lub dedykowany object storage (S3) zwalnia serwer aplikacji i ułatwia skalowanie.
Kompresja bez widocznej utraty jakości
Narzędzia takie jak ImageMagick, Sharp lub usługi jak Cloudinary pozwalają kompresować obrazy z kontrolą nad jakością. Zazwyczaj jakość 80-85% dla JPEG i 80% dla WebP jest nieodróżnialna wizualnie od 100%, ale daje plik o znacznie mniejszym rozmiarze. To dobry punkt startowy przed testowaniem z oczami klienta.