webp wordpress

WebP und WordPress = verbesserte Ladezeit und Performance?

Viele WordPress-Nutzer 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-Nutzer, die viele Bilder einsetzen, 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 Webseitenbesucher 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 z.B. 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.

Folgende Themen behandeln wir heute in diesem Artikel:

  1. Unterschiede gegenüber JPG und PNG

– Dateigrößen im Vergleich
– Farbraum/Tiefe
– Support/Unterstützung

  1. Welche Voraussetzungen brauche ich für WebP in WordPress?
  1. Wie füge ich WebP Bilder ein in WordPress?

– Ein Plugin benutzen
– In der .htaccess deines Servers etwas ergänzen
– Function.php Datei deines WordPress-Themes ergänzen. 

  1. Mein Fazit zu WebP

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 Punkto Performance.

png vs webp

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

PNGs sind nicht geeignet für Fotografen, 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 Grafik-Design, 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.

jpg vs webp

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, adobeRGB, dem jeweiligen Anzeigemodus eurer Monitore sowie dem Endgerät, mit dem ihr euch die Bilder anschaut. Vor Kurzem hatte ich selbst das Problem, dass meine Bilder auf meinem Bildschirm und der Webseite unterschiedlich aussahen. 

Mein Tipp: Heutzutage sind alle Browser im sRGB-Modus. Wenn du also bspw. in Photoshop etwas für’s Web erstellt, stelle deinen Monitor auf sRGB. Dann siehst du direkt, wie es aussieht, wenn es auf deiner Seite landet. 🙂 

Farbraum/Tiefe

Hier wird es etwas kompliziert. WebP basiert auf dem verlustbehafteten Video-Kompressions-Algorithmus 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 macht, 

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.

WordPress Performance messen

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 das „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.x
– Opera ab Version 39.x
– Chrome ab Version 23.x
– Edge ab Version 17.x
– Internet Explorer ab Version 11.x

Aktueller Support für Mobile Devices

– Android Browser ab Version 5.6 (Chromium 67)
– Android Chrome ab Version 73.x
– Opera Mini alle Versionen
– Opera Mobile ab Version 12.x
– Android Firefox ab Version 66.x
– Internet Explorer Mobile ab Version 11.x

WebP VP8 (Animierte Bilder)

– Google Chrome (Desktop and Android) ab Version 32.x
– Microsoft Edge ab Version 18.x
– Firefox ab Version 65.x
– Opera ab Version 19.x

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

Welche Voraussetzungen braucht 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:

Optimus WebP

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:

Shortpixel WebP

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:

Ewww Image Optimizer WebP

  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, könnt ihr bspw. in diesem Artikel nachlesen.

Fazit

Leider ist WebP heutzutage noch nicht Gang und Gäbe wie JPG und PNG, aber es wird mit Sicherheit zukünftig immer wichtiger werden. Schließlich lässt sich mit WebP die Performance deiner Seite und damit das Nutzererlebnis und die Zufriedenheit deiner Webseitenbesucher verbessern.

Plugin Ja | Nein?

Es gibt sehr gute 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.

Für wen eignet sich überhaupt WebP?

WebP ist im Prinzip für jede Seite sinnvoll. Besonders eignet ist das Format natürlich für Webseiten mit vielen Bildern. So zum Beispiel für Fotografen, 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 ihrer potenziellen Kunden und Fans so angenehm wie möglich zu machen.

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

Du möchtest alle 2 Wochen die neusten Blog-Artikel und News rund um WordPress erhalten?

Dann abonniere jetzt unsere kostenlosen WP-News!

Ja, ich bin mit der Datenverarbeitung einverstanden.