hallo@webwilli.at
hallo@webwilli.at +43 676 9724611
Stefan Schoner
14.03.2023

TYPO3: Bilder als WebP ausgeben

Da jpeg mittlerweile nicht mehr als modernes Format gilt sollte man die Verwendung reduzieren bzw. vermeiden um Daten zu sparen. Der einfachste Weg ist es, sich von Imagemagick/Graphicsmagik einfach die vom Redakteur gewarteten Bilder als webp ausgeben zu lassen.

TYPO3 Konfiguration

Zuerst muss man mal die fileextension aktivieren (LocalConfiguration.php oder AdditionalConfiguration.php)

$GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext'] = 'jpg,jpeg,png,gif,webp';

Link zur TYPO3-Dokumentation dieser Einstellung

Fluidtemplate

An den Stellen, an jenen man das Format erzwingen will, muss man die fileextension als parameter angeben:

<f:image image="{image}" width="640c" height="480c" fileExtension="webp" />

Achtung: Nicht alle Imagemagick Versionen können andere Formate in .webp umwandeln. D.h. in dem Fall wird das Original ausgegeben.
Ich habe die Funktion mit Version ^7.1 getestet.

Du musst aber nicht aufpassen, falls hier auch png/gif gewartet werden soll. WebP unterstütz die Transparenzen und Animationen von png/gif.

Was bringt mir das?

In gleicher Qualität ist das .webp um einiges kleiner als ein .jpg. In einem Test von mir waren es statt 250KB nur 110KB. Wir übertragen also viel weniger Daten zum Zielsystem und auch Google (sie haben auch usprünglich das Format entwickelt) bewertet dies als positiven Punkt. Natürlich muss man bei der Komprimierung aufpassen und die Einstellungen anpassen.

Wie schaut es mit Kompatibilität aus?

Aktuell kann das Format jeder moderner Browser lesen. Zu ~95% laut CanIuse (siehe Link unten). Wenn dir das nicht genug ist musst du eine Fallback Lösung einbauen.

Fallback Lösung mit <picture> tag

<picture>  
  <source srcset="meinbild.webp" type="image/webp">  
  <source srcset="meinbild.jpg" type="image/jpeg">  
  <img src="meinbild.jpg" />
</picture>
In diesem Fall wird das webp geladen falls möglich ansonten das jpeg. Diese Lösung ist aber mehr Aufwand und kann z.B. bei Hintergrundbildern nicht mehr angewandt werden.

Weiterführende Links

Webwilli
Webwilli