WebP Header
14.02.2022

Nativer WebP-Support in Drupal 9 verf├╝gbar

Das platzsparende Grafikformat WebP wird seit Drupal 9.2 nativ unterst├╝tzt.

Ein wichtiges Element auf jeder Webseite sind unbestritten Bilder und Grafiken. Und auch, wenn Bandbreiten und Datendurchs├Ątze in der Vergangenheit immer gr├Â├čer geworden sind, ist es dennoch nicht verkehrt, sich ├╝ber die Dateigr├Â├čen - inbesondere bei eingebundenen Bildern und Grafiken - Gedanken zu machen.

Nicht selten kommt es vor, dass Redakteure hochaufl├Âsende und extrem gro├če Bilder in Redaktionssysteme wie Drupal hineinladen, die schnell mehrere Megabyte an Gr├Â├če erreichen.

Image Styles helfen bei der Bildoptimierung

Zwar l├Ąsst sich das Problem schon relativ gut adressieren, indem man so genannte Image Styles (zu Deutsch Bildformate) in Drupal einsetzt, mit welchen von Nutzern eingepflegte Bildmedien automatisch komprimiert und/oder zugeschnitten werden.

Einrichten und konfigurieren lassen sich Bildstile bei einem Drupal-Setup ├╝ber die URL

https://deinedomain.ext/admin/config/media/image-styles/

Zus├Ątzlich Bandbreite sparen durch moderne Bildformate

Aber das reicht nicht immer aus. Es gibt z.B. auch Use Cases, wo Grafiken layoutunterst├╝tzend eingesetzt werden und somit in einer sehr hohen Aufl├Âsung vorliegen m├╝ssen, um alle denkbaren Abmessungen von Endger├Ąten, auf denen die Seite betrachtet werden k├Ânnte, abzudecken. Oft sind in solchen Grafiken auch Bereiche als transparent definiert, um sie z.B. ├╝berlagern zu k├Ânnen. Eine solche Alphatransparenz bietet beispielsweise das beliebte JPG-Format, welches hohe Kompressionsraten erlaubt, nicht. Lange musste daher in F├Ąllen, in denen Alphatransparenz erforderlich war, auf Formate wie PNG gesetzt werden. Der Nachteil hier ist aber wiederum, dass diese Grafikdateien erheblich gr├Â├čer sind als JPG.

Um dieses Problem zu adressieren, hat Google schon vor mehr als 10 Jahren das Format WebP eingef├╝hrt. Dieser Grafikstandard ist konkret f├╝r den Einsatz auf Webseiten konzipiert worden und erlaubt sowohl starke Kompressionsraten (wahlweise verlustfrei wie auch verlustbehaftet) als auch Alphatransparenz.

Jedoch hat es sehr lange gedauert - im Kontext des WWW k├Ânnte man fast von einer Ewigkeit sprechen - bis eine breitere Unterst├╝tzung f├╝r diesen Standard gewachsen ist, was insbesondere daran lag, dass es abgesehen von Googles Chrome bis vor kurzem keinen Browser gab, der das Format interpretieren konnte.

Bilder, die transparente Bereiche enthalten wie dieses Beispiel lassen sich nicht im platzsparenden JPG-Format speichern, da dieses keine Alphatransparenz unterst├╝tzt.
Bilder, die transparente Bereiche enthalten wie dieses Beispiel lassen sich nicht im platzsparenden JPG-Format speichern, da dieses keine Alphatransparenz unterst├╝tzt

Die Unterst├╝tzung war lange ein Problem

Die schleppende Adaption in den Browsern hat zur Folge, dass auch die Unterst├╝tzung von WebP in Content-Management-Systemen erst sehr sp├Ąt ein Thema wurde.

Inzwischen unterst├╝tzt jedoch beispielsweise WordPress WebP ohne separates Plugin. Aber auch Drupal erm├Âglicht seit der Version 9.2 von Mitte 2021 die Nutzung von WebP "out of the Box", sofern auf der Hostingumgebung, auf der es betrieben wird, f├╝r PHP die "Graphics Draw" (GD) Bibliothek mit WebP Unterst├╝tzung installiert wurde.

Ist alles korrekt eingerichtet, erlaubt Drupal die automatische Konvertierung von Grafiken nach WebP ├╝ber einen zus├Ątzlichen Effekt, der bei den eingangs erw├Ąhnten Bildformaten eingestellt werden kann.

WebP Support in Drupal ab Version 9.2 aktivieren

Hierzu muss ein Bildformat bearbeitet und bei "Effekt" -> "Einen neuen Effekt ausw├Ąhlen" aus der dann folgenden Auswahl die Option "Konvertieren" gew├Ąhlt und der neue Effekt angelegt werden.

WebP aktivieren
WebP aktivieren

Im Anschluss erh├Ąlt man dann eine weitere Optionspalette f├╝r das Format, in welches konvertiert werden soll. Hier sollte bei erfolgreichem Setup der GD-Library dann auch "WEBP" zu sehen sein.

Auswahl von WebP in den verf├╝gbaren Grafikformaten
Auswahl von WebP in den verf├╝gbaren Grafikformaten

Der Effekt kann sich sehen lassen. Hochaufl├Âsende PNG Grafiken wie das nachfolgende Bild hier im Beispiel mit einer Gr├Â├če von 4.021 x 2.452 Pixeln schlucken schnell mehrere Megabyte. Im konkreten Fall ist das Bild mehr als 12 MB gro├č und damit f├╝r einen Einsatz im Web komplett untauglich. Konvertiert nach WebP wiederum schrumpft das selbe Bild mit gleichbleibenden Abmessungen schon auf nur noch rund 1,4 MB. Wenn es jetzt noch mittels Image-Styles sinnvoll skaliert wird f├╝r den Einsatz z.B. in einem Blogbeitrag wie diesem hier, erreicht man problemlos Dateigr├Â├čen von weniger als 100 KB.

Dateigr├Â├čen im Vergleich - PNG zu WebP mit gleichen Abmessungen
Dateigr├Â├čen im Vergleich - PNG zu WebP mit gleichen Abmessungen

Umstellen oder nicht?

Bleibt das Problem mit der schleppenden Unterst├╝tzung. Zwar unterst├╝tzt der Chrome-Browser von Google, welches WebP im Jahre 2010 erstmals eingef├╝hrt hat, das Format auch seit diesem Jahr. Aber fast alle anderen Hersteller haben sich mit der Implementierung sehr viel Zeit gelassen:

  • Microsoft Edge: Unterst├╝tzung seit Oktober 2018
  • Mozilla Firefox: Unterst├╝tzung seit Januar 2019 (Version 65 und neuer)
  • Apple Safari: Unterst├╝tzung seit September 2020 (Version 14 und neuer, aber nur auf dem Betriebssystem macOS 11 Big Sur und neuer)

Entsprechend gibt es immer noch einen gewissen Anteil von Nutzern, die mit Browsern unterwegs sind, die kein WebP unterst├╝tzen. Insbesondere Nutzer ├Ąlterer Apple-Computer, die nicht mehr auf macOS Big Sur aktualisieren k├Ânnen, schauen in die R├Âhre, wenn sie Apples Standard-Browser Safari nutzen, da Apple den Support f├╝r WebP erst auf dieser macOS-Version f├╝r Safari bereit stellt.

Insgesamt wird aber der Anteil von Besuchern auf Webseiten, die diese mit Browsern ohne WebP-Support aufrufen, zunehmend kleiner werden, nachdem inzwischen alle "gro├čen" Hersteller die Unterst├╝tzung integriert haben. Schon jetzt erreichen z.B. Besucher mit ├Ąlteren Safari-Versionen auf erdfisch.de nur rund 3% aller Besucher.

Mit einem Fallback die Nutzer ├Ąlterer Browser bedienen

Ganz ohne Bilder m├╝ssen die Nutzer ├Ąlterer Browser zudem auch gar nicht auskommen, wenn der Webseiten-Betreiber bei der Umstellung auf WebP einen Fallback implementiert.

Hierbei bietet sich beispielsweise das <picture>-Tag aus HTML an, mittels welchem gr├Â├čerer Einfluss darauf genommen werden kann, welche Art von Bilddatei unter bestimmten Voraussetzungen durch den Browser gerendert werden soll.

Mittels

<picture>
    <source srcset="grafik.webp" type="image/webp">
    <source srcset="grafik.png" type="image/png">
    <img src="grafik.png">
</picture>

kann beispielsweise folgendes erreicht werden:

  • diejenigen Browser, die WebP schon unterst├╝tzen, werden die Referenz auf die Datei grafik.webp aus dem ersten <source>-Element nutzen

  • ├Ąltere Browser, die zwar das <picture>-Tag unterst├╝tzen, nicht jedoch das WebP-Format, nutzen die Referenz auf die PNG-Alternative aus dem zweiten <source>-Element

  • ganz antike Browser, die auch das <picture>-Tag nicht verstehen, ignorieren alle vorangegangenen Anweisungen und interpretieren nur das klassische <img>-Tag.

Leider scheint es derzeit f├╝r Drupal Core keinen einfachen Weg zu geben, den eingebauten WebP-Support auch um diesen Fallback zu erweitern.

M├Âglich wird er aber, wenn man statt dessen das ebenfalls verf├╝gbare Modul "WebP" f├╝r Drupal einsetzt. Ein entsprechendes Howto dazu findet sich im letzten Drittel eines Blogbeitrags des Co-Maintainers ab ├ťberschrift "Method 2a and 2b. WebP┬ámodule".

Fazit

Auch wenn WebP schon relativ lange verf├╝gbar ist, kam eine breite Unterst├╝tzung von seiten der Browser-Anbieter und auch Herstellern von Web-Applikationen wie Drupal erst in den letzten zwei bis drei Jahren auf. Inzwischen ist der Support aber gro├č genug, dass der Einsatz sinnvoll ist und sich lohnt.

Aktuell testen wir selbst die Umstellung auf WebP auf einer Stage-Version unserer erdfisch-Webseite, und werden voraussichtlich nach Abschluss der Tests allen nutzergenerierten Bild-Content auf der Live-Umgebung ebenfals in WebP ausliefern lassen.

Schlagworte

drupal webp