TYPO3 in 15 Minuten webP-fähig machen

Warum wir das bereits vor einigen Jahren von Google entwickelte Bildformat WebP verwenden und auch ausliefern sollten, ist klar: es bietet erheblich verkleinerte Datenmengen für Bilder im Vergleich zu jpg.  Das Fachmagazin t3n hat es bereits 2016 mit dem Artikel „Webp ganz einfach“ sehr gut auf den Punkt gebracht. Auch der Blick auf Googles WebP Gallery überzeugt.
Selbst wenn noch nicht jeder mit einem Webp-fähigen Browser unterwegs ist, so werden es doch mit jedem Update immer mehr. Zeit sich dem Thema anzunehmen und diesen Performancevorteil zu nutzen.

Wie man eine TYPO3-Installation in kürzester Zeit webP-fähig macht, zeigen wir hier.

1. ImageMagick und der Server

Voraussetzung ist eine aktuelle ImageMagick-Version, welche das neue WebP-Bildformat ausliefern kann. Um zu prüfen, ob dies bereits der Fall ist, reicht folgender Kommandozeilen-Befehl:

$ convert -list delegate | grep webp 
  png<= webp      "cwebp' -quiet %Q '%i' -o '%o"
  webp =>         "dwebp' -pam '%i' -o '%o"

Falls nicht, muss webP für ImageMagick noch installiert werden.

$ sudo apt-get install webp

Liegt die TYPO3-Instanz beispielsweise auf einem Mittwald-Server, kann die zusätzliche Bildbearbeitungs-Software „WebP“ dort im Softwaremanager hinzugefügt werden.

2. Die webP-Extension

Ist die Bildtransformation auf dem Server möglich, wird im nächsten Schritt die webP-Extension installiert. Diese TYPO3-Extension fügt automatisiert WebP-Kopien aller von TYPO3 verarbeiteten JPEG- und PNG-Bilder in den _processed_-Ordner hinzu.

$ composer require "plan2net/webp"

Die weiteren Schritte sind

  • Extension aktivieren
  • Datenbank prüfen (die Tabelle tx_webp_failed muss vorhanden sein)
  • Cache und alle _processed_-Bilder im TYPO3-Backend löschen
  • die Seite neu laden

Das initiale Laden einer Seite kann nun einige Zeit in Anspruch nehmen, da hier einmalig jedes Bild sozusagen doppelt prozessiert wird.

Läuft etwas schief, kann dies schnell im TYPO3-Log (var/log/typo3_*.log) gefunden werden.

3. Die .htaccess-Datei

Als letztes wird die .htaccess-Datei so angepasst, dass der Server beim Vorhandensein eines WebP-Bildes das aufgerufene JPEG- oder PNG-Bild einfach „ersetzt“.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.$3.webp -f
RewriteRule ^((fileadmin)/.+)\.(png|jpg|jpeg)$ $1.$3.webp [L]
...
</IfModule>

4. Die Freude

Hat alles geklappt, wird der Vorher-Nachher-Blick auf die Netzwerkanalyse einer sehr Bild-lastigen Seite prompt belohnt!

WebP - Vorher/Nachher Vergleich

Unsere Testseite nahm beispielsweise innerhalb ihrer 15-minütigen Diät fast 58% an Bildmaterial ab. Wenn das mal kein Grund zur Freude ist!