Viele interessieren sich für das Bildformat WebP, weil es die Vorteile von JPG und PNG vereint. Gleichzeitig ersetzt es jedoch die beiden gängigen Bildformate nicht. Für WordPress mit vielen Bildern, dürfte WebP aber besonders nützlich sein. Warum das so ist, erklären wir in diesem Artikel.

In der heutigen Zeit wird es immer wichtiger, das Nutzererlebnis deiner Zielgruppe so angenehm und einfach wie möglich zu gestalten. Menschen sind visuell und können Informationen, die sie sehen, oft schneller und besser aufnehmen. Der schnelle Blick auf eine Werbetafel, das Durchscrollen auf einer Homepage, bevor der Bus in fünf Minuten kommt. Wir alle kennen diese Situationen. 

Da Bilder in der Regel über die Hälfte des Speicherplatzes einer Website ausmachen, steckt hier viel Optimierungspotenzial.

Nun noch ein paar Fakten über WebP, bevor es zu den Themen geht.

• WebP unterstützt das Videoformat VP8, welches sich zum Beispiel für kleine animierte Bilder eignet, wie wir es von GIFs kennen.
• Die maximale Bildgröße für WebP ist 16.383 x 16.383 Pixel.
• Auch kannst du ein WebP Bild hoch- oder runterskalieren, ähnlich wie SVG Dateien, die aber viele aus Sicherheitsgründen nicht zulassen.

Unterschiede gegenüber PNG und JPG 

WebP und PNG

Ein WebP Bild ist bis zu ca. 25–30 Prozent kleiner als ein PNG, ohne Qualitätsverlust. Dabei können Hintergründe trotzdem transparent sein. Dies variiert nur noch zwischen dem Bild an sich, Bildtiefe, Details, Farbraum usw. Aufgrund der kleinen Dateigröße, bringt das WebP Format einen deutlichen Vorteil in puncto Performance.

Anhand der beiden Bilder lässt sich sagen, dass das WebP Bild mit 30,1 Prozent kleiner ist als die PNG Version. Ich habe hier die verlustfreie Methode gewählt und den Regler der Qualität bewusst auf 80 Prozent gesetzt. Die restlichen 20 von 100 Prozent kann man so gut wie nie erkennen, somit reichen 80 Prozent vollkommen für online Anwendungen aus. 

Nachteile des Formats PNG

PNG sind nicht geeignet für Fotografien, weil sie eine erheblich größere Bilddatei erstellen. Das Format PNG wird meistens für Screenshots benutzt, weil PCs Bilder als PNG abspeichern. Warum? – Weil Screenshots oft ein Mix aus Bild und Text sind. 

Das PNG wird zum Beispiel für Bilder verwendet, die einen transparenten Hintergrund benötigen. Dies macht das Format sehr vielfältig und beliebt im Grafikdesign, da dort oft viele Elemente zusammentreffen.

PNG gibt es in den Formaten PNG 8 und PNG 24. PNG 8 verwendet eine Farbtiefe von 8 Bit und maximal 256 Farben. PNG 24 verwendet eine 24 Bit Farbtiefe mit bis zu 16,7 Millionen Farben. Somit ist PNG 24 mit dem JPEG Format vergleichbar. Machen wir also mit dem JPG Format weiter:

Das Bildformat JPG

Im direkten Vergleich mit JPG ist das WebP Bild ungefähr 25 bis 35 % kleiner – trotz gleichbleibender Qualität des Bildes. Hier gibt es zwischen den beiden Kandidaten JPG und WebP nichts zu sagen – WebP ist einfach die bessere Wahl.

Anhand der beiden Bilder lässt sich sagen, dass das WebP Bild mit 24,7 % kleiner ist als die JPG Version. Bei der JPG Version habe ich die Qualität auf „Hoch“ gesetzt.

Das JPG Format bietet sich an, wenn man mit Qualitätsverlusten leben kann und es nicht auf Schärfe und Details ankommt. Das Format wird oft für farbenreiche Bilder benutzt, da die Zusammensetzung von JPG es erlaubt, viele Farben und Abstufungen darzustellen.  

Kleiner Hinweis: Wie Bilder letztendlich bei euch aussehen, hängt von vielen Faktoren ab: zum Beispiel von der Bildschirmauflösung (HD, QHD, UHD/4K, 8K usw.), der Bildschirmeinstellung wie sRGB, Adobe RGB, dem jeweiligen Anzeigemodus eurer Monitore sowie dem Endgerät, mit dem ihr euch die Bilder anschaut. In den letzten Tagen hatte ich selbst das Problem, dass meine Bilder auf meinem Bildschirm und der Website unterschiedlich aussahen. 

Farbraum/Tiefe

Hier wird es etwas kompliziert. WebP basiert auf dem verlustbehafteten Video Kompressionsalgorithmus VP8, mit einer Komprimierung bis zu 24 Bits und einer Größe von maximal 16.383 x 16.383 Pixel. Es hat also immer eine Farbtiefe von 24 Bit, ebenso wie das JPG. Die Farbtiefe von PNG reicht von 8 bis 48 Bits, wobei letzteres aufgrund der großen Dateigröße wenig Sinn ergibt,

Als VP8 Bitstream funktioniert das verlustfreie Erzeugen von WebP Bildern nur mit dem 8 Bit Bildformat – auch bekannt unter YUV420 Bildformat.

Das YUV420 Format aufgedröselt: Betrachten wir erst einmal, wie ein Monitor standardmäßig ein Bild anzeigt: Jede Farbe kann durch drei Farben (das sogenannte RGB Modell) dargestellt werden, d.h. rot, grün und blau.

Jede Farbe einzeln – also rot, grün und blau – kann auf dem PC in 1 Byte (8 Bit) aufgezeichnet werden. EIN Pixel in einem Monitor hat also 3 Bytes (jedes Byte hat Informationen über die jeweilige Farbe rot, grün und blau)

Das menschliche Auge ist sehr sensibel, wenn es um Helligkeit geht, aber weniger sensibel bei Farben und ihren Abstufungen. So setzt sich die Bezeichnung YUV aus Y = Luminanz (Helligkeit) sowie U und V bedeuten Chrominanz (Farbe) zusammen. YUV ist also wie RGB, mit dem eine Farbe dargestellt wird.

Aber warum brauchen wir es trotzdem?

Weil die Dateigröße dabei wichtig ist. Im RGB Modell müssen wir 3 Bytes (24 Bits) verwenden, um eine Farbe zu speichern. Bei YUV hingegen halbiert sich die Größe aufgrund der Art und Weise, wie es berechnet und dann abgespeichert wird. Es ist kompliziert, aber ich denke, dass an dieser Stelle die Informationen ausreichen und etwas Klarheit bringen.

Support/Unterstützung

Die Statistik verdeutlicht, welcher Browser von welchem „Endgerät“ wie PC, Tablet oder Smartphone am meisten benutzt wird. Da WebP nicht von allen Browsern unterstützt wird, solltest du dies im Blick haben.

Natürlich ist zu erkennen, dass „mobile Devices“ mehr im Fokus sind, was auch erklärt, warum für das Smartphone besserer Support für WebP bereitgestellt wird. Sieh dir deswegen unbedingt deine User Statistiken an und schau, von welchem Browser und Endgerät du die meisten Besucher erhältst.

Die folgende Auflistung zeigt, welche Browserversionen auf welchen Endgeräten bereits in den Genuss von WebP kommen.

Aktueller Support für Desktop Browser

• Firefox ab Version 65.xOpera ab Version 39.xChrome ab Version 23.xEdge ab Version 17.xInternet Explorer ab Version 11.x

Aktueller Support für Mobile Devices

• Android Browser ab Version 5.6 (Chromium 67)Android Chrome ab Version 73.xOpera Mini alle VersionenOpera Mobile ab Version 12.xAndroid Firefox ab Version 66.xInternet Explorer Mobile ab Version 11.x

WebP VP8 (Animierte Bilder)

• Google Chrome (Desktop and Android) ab Version 32.xMicrosoft Edge ab Version 18.xFirefox ab Version 65.xOpera ab Version 19.x

WebP Support für weitere Browser und Devices konnte ich aktuell nicht finden.

Voraussetzungen von WebP in WordPress

Soweit keine, aber… Die schlechte Nachricht ist leider, dass WordPress aktuell nicht eigenständig WebP Bilder unterstützt. Deswegen kommen wir nun zum nächsten Punkt.

Möglichkeiten, um WebP in WordPress einzubinden:

1. Ein Plugin benutzen

Hierfür bieten sich zum Beispiel die Plugins ShortPixel (Free Version), Optimus (Paid Version) oder der EWWW Image Optimizer (Free Version) an.

Optimus

Leider wird WebP nur von der kostenpflichtigen Version von Optimus unterstützt. Da Raidboxes bereits serverseitiges Caching integriert hat, benötigst du übrigens kein „Cache Enabler“ Plugin, wie hier von Optimus empfohlen.

ShortPixel

In ShortPixel kannst du das Häkchen wie oben zu sehen ist setzen. Aber vorher würde ich alle Bilder, die du hast, auf das Original zurücksetzen und dann alle auf einmal mit dem Plugin optimieren. Dann solltest du auch gleichzeitig sehen, dass du verschiedene Dateitypen von deinen Bildern hast.

EWWW Image Optimizer

1. Anpassungen in der .htaccess von WordPress vornehmen

Einige Hoster haben die Möglichkeit, etwas an der .htaccess Datei zu ändern, bewusst aus Sicherheitsgründen blockiert. Wenn du auf einem Apache Server hostest, kannst du folgende Anpassung vornehmen:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp

Und auf einem Nginx:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp";
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

Bei Raidboxes wird diese Rewrite Rule übrigens schon von Haus aus unterstützt.

Wo finde ich sie?

Die Datei findet man auf dem Webserver, auf dem WordPress installiert wurde. Das root Verzeichnis ist das Hauptverzeichnis, auf dem die Domain beim Webhoster liegt. Wenn du sie nicht sehen kannst, musst du die „remote file mask“ auf -la setzen, damit du auch versteckte Dateien siehst. Das setzt natürlich voraus, dass du Zugriffsrechte hast oder sogar selbst hostest und ein FTP Programm wie FileZilla benutzt.

Es gibt noch eine dritte – und etwas komplizierte – Möglichkeit, etwas in der function.php Datei eures WordPress Themes zu ergänzen, damit ihr von Haus aus Bilder im WebP Format hochladen könnt. Wie dies funktioniert, kannst du in diesem Artikel nachlesen.

Für wen eignet sich WebP?

WebP ist im Prinzip für jede Website sinnvoll. Besonders eignet sich das Format natürlich für Websites mit vielen Bildern. So zum Beispiel für die Websites von Fotograf:innen, die ihre Bildqualität so hoch wie möglich halten wollen, aber trotzdem viel Wert auf eine schnelle Ladezeit legen. Aber auch andere WordPress User wie Kreative oder diejenigen, die etwas in bildlicher Form zu zeigen haben, sollten alles daran setzen, das Nutzererlebnis so angenehm wie möglich zu machen.

Fazit zu WebP und WordPress

Leider ist WebP heutzutage noch nicht üblich, im Gegensatz zu JPG und PNG, aber es wird mit Sicherheit zukünftig immer wichtiger werden. Schließlich lässt sich mit WebP die Performance deiner Website und damit das Nutzererlebnis und die Zufriedenheit deiner Zielgruppe verbessern.

Plugin: Ja oder Nein?

Es gibt hervorragende Plugins, die dir beim WebP Support Arbeit abnehmen und dazu noch deine Bilder optimieren. Ich persönlich habe dafür zum Plugin Optimus gegriffen. Ansonsten wäre es sicherlich eine Überlegung wert, es in die Seite als Code einzubinden, zumal man sich dann ein Plugin mehr sparen würde. Aber unterm Strich bist du mit einem Plugin für diese Angelegenheit gut beraten.

Ich hoffe, euch hat der Artikel gefallen und ich freue mich auf eure Meinung!