WebP para TYPO3

Bilder machen 50 bis 70 Prozent des Seitengewichts aus, und WebP reduziert sie um ein Drittel

Die durchschnittliche TYPO3-Website lädt pro Seite 2 bis 5 MB an Bilddaten. Das ist der grösste einzelne Faktor für die Ladezeit und damit für den Google PageSpeed Score. WebP ist ein von Google entwickeltes Bildformat, das bei vergleichbarer Qualität 25 bis 35 Prozent kleiner ist als JPEG und bis zu 80 Prozent kleiner als PNG. Die TYPO3 WebP-Extension konvertiert vorhandene JPG- und PNG-Bilder automatisch in WebP, ohne dass Redakteure ihr Verhalten ändern müssen. Bilder werden wie gewohnt im FAL-Backend hochgeladen, die Extension erzeugt die WebP-Variante im Hintergrund und liefert sie an Browser aus, die das Format unterstützen. Alle modernen Browser unterstützen WebP seit 2020: Chrome, Firefox, Safari, Edge.

Für Websites, die bereits PageSpeed-optimiert sind, ist die WebP-Konvertierung oft der letzte Schritt, der den Score von 85 auf 95 oder höher hebt.

Cenários típicos de uso envolvem bildlastige Websites, E-Commerce und Mobile-First-Projekte

Das häufigste Szenario sind bildlastige Unternehmenswebsites. Ein Immobilienportal zeigt pro Objekt 15 bis 25 Fotos. Bei 500 Objekten sind das 10.000 Bilder. Ohne WebP wiegen die Bilder im Schnitt 250 KB (JPEG), mit WebP 170 KB. Auf einer Listenansicht mit 20 Objekten und je einem Titelbild spart WebP 1,6 MB pro Seitenaufruf. Bei 50.000 Seitenaufrufen pro Monat sind das 80 GB weniger Traffic, was sich direkt auf die Hosting-Kosten auswirkt.

Ein zweites Szenario sind E-Commerce-Integrationen. Ein Shopsystem zeigt Produktbilder in verschiedenen Grössen: Thumbnail, Listenansicht, Detailansicht, Zoom. Jede Grösse wird als WebP-Variante generiert. Bei einem Shop mit 2.000 Produkten und je fünf Bildvarianten entstehen 10.000 WebP-Dateien, die den Seitenaufbau in der Listenansicht messbar beschleunigen.

Drittes Szenario: Mobile-First-Websites für Zielgruppen mit schlechter Netzanbindung. Ein NGO-Portal, das in Regionen mit 3G-Netzen genutzt wird, profitiert überproportional von kleineren Bilddateien. Der Unterschied zwischen 5 Sekunden und 15 Sekunden Ladezeit entscheidet, ob der Besucher die Seite sieht oder abbricht.

Arquitetura técnica konvertiert Bilder im TYPO3-Processing-Pipeline

Die Extension klinkt sich in die TYPO3-Bild-Processing-Pipeline ein. Wenn TYPO3 ein Bild verarbeitet (Resize, Crop), erzeugt die Extension zusätzlich eine WebP-Variante im selben Verzeichnis. Die Auslieferung erfolgt über Content Negotiation: Der Server prüft den Accept-Header des Browsers. Wenn der Browser “image/webp” akzeptiert, liefert er die WebP-Datei. Andernfalls das Original-JPEG/PNG.

Technisch gibt es zwei Implementierungsvarianten: Die erste nutzt mod_rewrite-Regeln im Apache oder nginx, die Bild-Requests auf die WebP-Variante umleiten, wenn sie existiert. Die zweite nutzt ein TYPO3-Middleware, das den Response-Header manipuliert. Die mod_rewrite-Variante ist performanter, weil sie vor PHP ausgeführt wird.

Die Konvertierung selbst läuft über libwebp (Kommandozeilen-Tool cwebp), ImageMagick mit WebP-Support oder die PHP-Extension GD (wenn mit WebP-Support kompiliert). Die Qualität ist konfigurierbar: Standard 80 (von 100), was einen guten Kompromiss zwischen Dateigrösse und visueller Qualität bietet. Für fotografische Inhalte empfehlen wir 82 bis 85, für Screenshots und Illustrationen 75 bis 78.

Für noch bessere Kompression unterstützen neuere Versionen der Extension das AVIF-Format, das weitere 20 bis 30 Prozent Einsparung gegenüber WebP bietet. AVIF-Support ist in Chrome und Firefox verfügbar, Safari seit Version 16.

Problemas frequentes betreffen fehlende Server-Libraries und CDN-Konfiguration

Das häufigste Problem ist die fehlende cwebp-Binary auf dem Server. Shared-Hosting-Umgebungen haben oft kein libwebp installiert, und der Hoster erlaubt keine Installation von Binaries. A solução: PHP GD mit WebP-Support nutzen (in den meisten PHP-Versionen ab 7.1 verfügbar) oder einen Hosting-Provider wählen, der cwebp bereitstellt. Auf Managed-Servern und in Docker-Containern ist die Installation trivial: apt-get install webp.

Zweites Problem: CDN-Konfiguration. Wenn ein CDN (Cloudflare, Fastly, AWS CloudFront) vor der Website liegt, muss es WebP korrekt handhaben. Zwei Ansätze: Das CDN kennt Content Negotiation und cached WebP und JPEG als separate Varianten (Vary: Accept). Oder die TYPO3-Website liefert direkt WebP-URLs aus (ohne Content Negotiation), und das CDN cached nur eine Version. Cloudflare bietet automatische WebP-Konvertierung über Polish, was die TYPO3-Extension teilweise überflüssig macht.

Drittes Thema: Qualitätskontrolle. Bei zu niedriger Qualitätseinstellung (unter 70) werden Artefakte sichtbar, besonders bei Farbverläufen und feinen Texturen. Ein A/B-Vergleich (Original vs. WebP) sollte nach der Konfiguration durchgeführt werden, um sicherzustellen, dass die Qualität für den Anwendungsfall akzeptabel ist.

TYPO3 v12 und v13 werden unterstützt, die Extension ist eine der stabilsten im Ökosystem

Die WebP-Extension gehört zu den am häufigsten installierten Performance-Extensions im TYPO3-Ökosystem. Sie wird aktiv gepflegt und ist mit TYPO3 v12 und v13 kompatibel. Da die Kernfunktionalität (Bild-Processing-Hook, Datei-Konvertierung) auf stabilen TYPO3-APIs basiert, sind Breaking Changes bei Upgrades selten. A Gosign configura WebP als Standard in jedem neuen TYPO3-Projekt und aktiviert bei Verfügbarkeit zusätzlich AVIF für maximale Kompression.