Wszystko, co warto wiedzieć, zanim zainstalujesz.
Szczegółowe spojrzenie na to, jak działa DataFirefly Image Optimizer: WebP, AVIF, Kompresja i CDN dla Shopware 6, dlaczego zbudowaliśmy go w ten sposób i jaka myśl stoi za powyższymi funkcjami.
Problem z obrazami w domyślnym Shopware 6
Shopware kompresuje pliki JPEG przez natywny ThumbnailService i generuje kilka rozmiarów miniatur, ale nie tworzy ani WebP, ani AVIF. Tymczasem WebP oszczędza średnio 25 do 35% względem JPEG, a AVIF schodzi jeszcze niżej, do 50 aż 60% zysku względem JPEG w większości przypadków. Bez tych formatów Twoje Largest Contentful Paint pozostaje ciężkie, a wynik Core Web Vitals zatrzymuje się w miejscu. Brakuje też natywnej integracji z CDN, więc każdy obraz jest serwowany z Twojego serwera aplikacji, co zwiększa obciążenie i opóźnienia dla odległych odwiedzających.
Kompletny pipeline, który stawia ta wtyczka
Przy wgraniu pliku subscriber nasłuchuje media.written i wykrywa typy JPEG, PNG i GIF. Jeśli włączono kompresję w miejscu, oryginał zostaje przetworzony: progresywny JPEG z podpróbkowaniem 2x2/1x1/1x1 i konfigurowalną jakością albo PNG z ustawionym poziomem kompresji i filtrami. Metadane EXIF i ICC są usuwane, jeśli opcja jest zaznaczona, co daje niemały zysk na wadze zdjęć prosto z aparatu. Następnie powstaje obok plik siostrzany WebP z kumulowanym rozszerzeniem, na przykład foo.jpg.webp, w skonfigurowanej jakości, z opcjonalnym trybem bezstratnym dla PNG. Potem powstaje plik siostrzany AVIF z własną, niezależną jakością i zabezpieczeniem na maksymalną szerokość, żeby nie obciążyć procesora przy bardzo dużych obrazach. Na koniec to samo traktowanie dostają miniatury Shopware.
Przepisywanie na CDN z precyzyjnym zakresem
Integracja z CDN nie przepisuje bezmyślnie wszystkich adresów. Dostępne są trzy zakresy: same media, obejmujące wyłącznie adresy zaczynające się od /media, media plus miniatury, dodające /thumbnail, oraz wszystkie zasoby statyczne, obejmujące również /theme, /bundles i /assets. Zakres domyślny, czyli same media, jest najbezpieczniejszy i pokrywa 95% potrzeb. Filtr Twiga df_cdn pozwala dodatkowo deweloperom motywów ręcznie zastosować przepisanie na dowolnym adresie. Kiedy CDN jest aktywny, wtyczka sama wstrzykuje dns-prefetch i preconnect do sekcji head, co daje od 50 do 200 ms zysku na pierwszym żądaniu do CDN, zależnie od opóźnienia.
Renderowanie picture zgodne z dobrymi praktykami
Komponent storefront component image thumbnail.html.twig jest rozszerzany przez sw_extends. Blok component_thumbnail_picture opakowuje nadrzędny znacznik img w picture ze źródłami AVIF, potem WebP, a na końcu z oryginałem jako fallbackiem. Kolejność jest kluczowa: AVIF na pierwszym miejscu, bo nowsze przeglądarki wolą ten format i oszczędzają najwięcej transferu, WebP na drugim jako zabezpieczenie dla starszego Safari, a fallback JPEG albo PNG dla reszty. Atrybuty loading lazy, decoding async oraz width i height chroniące przed CLS są dodawane zgodnie z konfiguracją.
Zaplanowane zadanie dla obrazów już w bazie
Włączenie wtyczki w sklepie, który ma już tysiące obrazów w bazie, nie uruchamia optymalizacji wstecznej automatycznie, bo byłoby to niebezpieczne. Zamiast tego zaplanowane zadanie Shopware uruchamia się domyślnie co 15 minut, wskazuje jeszcze niezoptymalizowane pliki przez LEFT JOIN na df_image_optimizer i przetwarza konfigurowalną partię, domyślnie 50 sztuk. Pozwala to nadrobić duży sklep w kilka godzin, bez blokowania kolejki i bez przeciążania serwera. Przycisk w panelu administracyjnym pozwala też w dowolnym momencie uruchomić partię ręcznie, do testów albo do doraźnych nadrobień.
Przejrzyste wykrywanie możliwości serwera
Jeszcze przed pierwszą optymalizacją panel pokazuje na bieżąco, co jest dostępne po stronie serwera: wersję PHP, obecność Imagicka wraz z obsługiwanymi formatami, obecność GD wraz z jego formatami, faktyczne wsparcie WebP i AVIF oraz zalecany silnik. Imagick ma pierwszeństwo, gdy jest dostępny, bo daje lepszą jakość kodowania i natywne wsparcie AVIF przez libheif. W przeciwnym razie pracę przejmuje GD, który od dawna obsługuje WebP, a AVIF od PHP 8.1. Żadnych niespodzianek: jeśli AVIF nie jest dostępny na serwerze, wtyczka po prostu pomija ten krok i kontynuuje z WebP, zamiast się wywalić.
Bezpieczeństwo i porządek
Konwersje są atomowe: wtyczka odkłada obraz do lokalnego pliku tymczasowego dla konwerterów wymagających rzeczywistej ścieżki, a potem konsekwentnie sprząta w bloku finally. Błędy trafiają do loggera PSR i nigdy nie przerywają transakcji zapisu pliku: udane wgranie nigdy nie zostanie zablokowane przez nieudaną konwersję. Przy deinstalacji wybierasz, czy zachować dane użytkownika: tabele df_image_optimizer są usuwane tylko wtedy, gdy odznaczysz tę opcję. Wygenerowane pliki WebP i AVIF pozostają na dysku dla bezpieczeństwa, a jednolinijkowy skrypt pozwala je w razie potrzeby wyczyścić.
Dla kogo jest ta wtyczka
Dla każdego sklepu na Shopware 6, w którym obrazy są wąskim gardłem dla LCP albo transferu. Dla sklepów B2C z bogatymi katalogami zdjęciowymi: moda, wystrój wnętrz, meble, artykuły spożywcze. Dla sklepów międzynarodowych, które wysyłają treść daleko od serwera źródłowego i chcą odciążyć go przez CDN. Dla deweloperów motywów, którzy wolą czysty filtr i funkcję Twiga zamiast ręcznego sklejania znaczników img. Dla zespołów SEO, które śledzą Core Web Vitals i chcą łatwo zyskać 20 do 40 punktów w PageSpeed.
Na razie nie ma opinii o produkcie.