WebP dla TYPO3

Obrazy stanowią od 50 do 70 procent wagi strony, a WebP redukuje je o jedną trzecią

Przeciętna witryna TYPO3 ładuje na stronę 2 do 5 MB danych obrazów. To największy pojedynczy czynnik czasu ładowania, a tym samym wyniku Google PageSpeed. WebP to format obrazów opracowany przez Google, który przy porównywalnej jakości jest o 25 do 35 procent mniejszy od JPEG i nawet o 80 procent mniejszy od PNG. Rozszerzenie WebP dla TYPO3 konwertuje istniejące obrazy JPG i PNG automatycznie do WebP, bez konieczności zmiany zachowań redaktorów. Obrazy są wgrywane jak dotąd w backendzie FAL, rozszerzenie generuje wariant WebP w tle i serwuje go przeglądarkom obsługującym ten format. Wszystkie nowoczesne przeglądarki wspierają WebP od 2020 roku: Chrome, Firefox, Safari, Edge.

Dla witryn już zoptymalizowanych pod PageSpeed konwersja WebP jest często ostatnim krokiem podnoszącym wynik z 85 do 95 lub wyżej.

Typowe scenariusze dotyczą witryn nasyconych obrazami, e-commerce i projektów mobile-first

Najczęstszym scenariuszem są witryny firmowe nasycone obrazami. Portal nieruchomości pokazuje przy każdym obiekcie 15 do 25 zdjęć. Przy 500 obiektach to 10 000 obrazów. Bez WebP zdjęcia ważą średnio 250 KB (JPEG), z WebP 170 KB. Na widoku listy z 20 obiektami i jednym zdjęciem tytułowym każdego WebP oszczędza 1,6 MB na każde wywołanie strony. Przy 50 000 wywołań stron miesięcznie to 80 GB mniej ruchu, co bezpośrednio przekłada się na koszty hostingu.

Drugim scenariuszem są integracje e-commerce. System sklepowy pokazuje zdjęcia produktów w różnych rozmiarach: miniatura, widok listy, widok szczegółowy, zoom. Każdy rozmiar generowany jest jako wariant WebP. Przy sklepie z 2 000 produktami i pięcioma wariantami obrazu na produkt powstaje 10 000 plików WebP, mierzalnie przyspieszających budowanie strony w widoku listy.

Trzeci scenariusz: witryny mobile-first dla grup docelowych ze słabym łączem. Portal NGO wykorzystywany w regionach z sieciami 3G nieproporcjonalnie zyskuje na mniejszych plikach obrazów. Różnica między 5 sekundami a 15 sekundami ładowania decyduje, czy odwiedzający zobaczy stronę, czy zrezygnuje.

Architektura techniczna konwertuje obrazy w pipeline’ie processingu TYPO3

Rozszerzenie wpina się w pipeline image processingu TYPO3. Gdy TYPO3 przetwarza obraz (resize, crop), rozszerzenie dodatkowo generuje wariant WebP w tym samym katalogu. Dostarczanie odbywa się przez Content Negotiation: serwer sprawdza nagłówek Accept przeglądarki. Gdy przeglądarka akceptuje “image/webp”, serwer dostarcza plik WebP. W przeciwnym razie oryginalny JPEG/PNG.

Technicznie istnieją dwa warianty implementacji: pierwszy wykorzystuje reguły mod_rewrite w Apache lub nginx, przekierowujące zapytania o obrazy na wariant WebP, gdy istnieje. Drugi wykorzystuje middleware TYPO3 manipulujące nagłówek odpowiedzi. Wariant mod_rewrite jest wydajniejszy, ponieważ wykonywany jest przed PHP.

Sama konwersja działa przez libwebp (narzędzie wiersza poleceń cwebp), ImageMagick z obsługą WebP lub rozszerzenie PHP GD (gdy skompilowane z obsługą WebP). Jakość jest konfigurowalna: standard 80 (na 100), co stanowi dobry kompromis między rozmiarem pliku a jakością wizualną. Dla treści fotograficznych zalecamy 82 do 85, dla zrzutów ekranu i ilustracji 75 do 78.

Dla jeszcze lepszej kompresji nowsze wersje rozszerzenia wspierają format AVIF, oferujący kolejne 20 do 30 procent oszczędności względem WebP. Wsparcie AVIF jest dostępne w Chrome i Firefox, w Safari od wersji 16.

Częste problemy dotyczą brakujących bibliotek serwerowych i konfiguracji CDN

Najczęstszym problemem jest brakujący plik binarny cwebp na serwerze. Środowiska shared hosting często nie mają zainstalowanego libwebp, a hostingodawca nie zezwala na instalację plików binarnych. Rozwiązanie: wykorzystać PHP GD z obsługą WebP (dostępne w większości wersji PHP od 7.1) lub wybrać dostawcę hostingu udostępniającego cwebp. Na serwerach zarządzanych i w kontenerach Docker instalacja jest trywialna: apt-get install webp.

Drugi problem: konfiguracja CDN. Gdy CDN (Cloudflare, Fastly, AWS CloudFront) stoi przed witryną, musi poprawnie obsługiwać WebP. Dwa podejścia: CDN zna Content Negotiation i cache’uje WebP oraz JPEG jako osobne warianty (Vary: Accept). Albo witryna TYPO3 dostarcza bezpośrednio URL-e WebP (bez Content Negotiation), a CDN cache’uje tylko jedną wersję. Cloudflare oferuje automatyczną konwersję WebP przez Polish, co częściowo czyni rozszerzenie TYPO3 zbędnym.

Trzeci temat: kontrola jakości. Przy zbyt niskim ustawieniu jakości (poniżej 70) widoczne stają się artefakty, szczególnie przy gradientach kolorów i drobnych teksturach. Po konfiguracji należy przeprowadzić porównanie A/B (oryginał vs. WebP), aby upewnić się, że jakość jest akceptowalna dla danego zastosowania.

TYPO3 v12 i v13 są wspierane, rozszerzenie należy do najstabilniejszych w ekosystemie

Rozszerzenie WebP należy do najczęściej instalowanych rozszerzeń wydajnościowych w ekosystemie TYPO3. Jest aktywnie utrzymywane i kompatybilne z TYPO3 v12 oraz v13. Ponieważ funkcjonalność podstawowa (hook image processingu, konwersja plików) opiera się na stabilnych API TYPO3, breaking changes przy upgrade’ach zdarzają się rzadko. Gosign konfiguruje WebP jako standard w każdym nowym projekcie TYPO3 i dodatkowo, gdy dostępne, włącza AVIF dla maksymalnej kompresji.