Was ist WebP? Verwendung von WebP-Bildern in WordPress!

Was ist WebP?

Das ist ein bereits 2010 von Google entwickeltes Bilderformat für verlustbehaftet oder verlustfrei komprimierte Bilder. Die Bilder können statisch oder animiert sein, das spielt keine Rolle. Obwohl Google schon lange auf sein WebP-Format für Bilder setzt, hat sich das relativ neue Bildformat noch nicht so richtig durchgesetzt. Das wird sich jetzt wohl ändern. Wir verraten dir, warum und wie du mit WebP deine Website in eine neue Geschwindigkeitsliga katapultierst.

Der Clou daran: WebP-Bilder sind deutlich kleiner als vergleichbare Bilder im Jpg-Format.

Die Bilder werden zum Teil um 50 Prozent und mehr verkleinert. Bei der Qualität sieht man dabei keinen Unterschied.

Der große Vorteil: Kleinere Bilder werden schneller geladen, was die Website insgesamt viel flotter macht. Und wir wissen ja alle: Google liebt schnelle Websites! Es gibt also viele Gründe, auf das neue Bildformat zu setzen.

WebP ist stark im Kommen

Trotz der Vorteile, die das WebP-Format bietet, hat es sich noch nicht ganz durchgesetzt. In Deutschland soll nur etwa die Hälfte der Internetnutzer über einen WebP-kompatiblen Browser verfügen, in den USA sollen es etwa drei Viertel der Nutzer sein. Google Chrome und Android Handys zeigen WebP-Bilder natürlich an – beides kommt ja aus dem Haus von Alphabet (dem Google-Mutterkonzern). Microsoft Edge ist erst seit Ende 2018 dabei. Firefox hatte sich bisher geweigert, das WebP-Format zu unterstützen. Bis jetzt. Die Ende Januar 2019 erschienene Version Mozilla Firefox 65 unterstützt jetzt auch WebP. Es ist also nur noch eine Frage der Zeit, bis nahezu alle Internetnutzer WebP-Bilder sehen können.

Wir zeigen hier die Vor- und Nachteile von WebP-Images auf und erklären, wie du WebP-Images auf deiner WordPress-Site verwenden kannst.

Verwendung von WebP-Bildern in WordPress

Wenn du Bilder für die Verwendung im Internet speichern willst, kannst du verschiedene Dateitypen verwenden. Die am meisten verwendeten Optionen sind PNG, JPEG (oder JPG) und GIF. Während diese Formate beliebt sind, hat jedes seine eigenen Vor- und Nachteile:

JPEGs können detailreiche Bilder mit vielen Farben darstellen und sind daher ideal für Fotos. Gleichzeitig sind die Dateien oft sehr groß und sind bei der Komprimierung nicht immer optimal.

PNGs sind ideal für Bilder ohne große Datenmengen wie Logos oder Screenshots der Benutzeroberfläche. Sie behalten die Qualität beim Komprimieren hervorragend und unterstützen Transparenz, funktionieren aber nicht gut für Fotos.

GIFs eignen sich bestens für Animationen aber nicht zum Speichern statischer Bilder.

WebP-Bilder sind ein Bildformat von Google, mit dem Bilder im Web in einer ähnlichen Qualität angezeigt werden können wie bestehende Bildformate. Die Dateigröße ist jedoch wesentlich geringer.

Um dies zu erreichen, bietet WebP sowohl verlustbehaftete als auch verlustfreie Optionen zur Komprimierung. Letzteres speichert mehr Daten, während beim ersteren die resultierenden Dateigrößen noch kleiner werden.

Google stellte fest, dass die Konvertierung in WebP von einem Standard-PNG zu einer Reduzierung der Dateigröße um 45% und im Vergleich zu bereits komprimiertem PNG immer noch um 28% führte. Im Vergleich zu JPEG bietet es im Durchschnitt eine erstaunliche Größeneinsparung von 25 bis 34%

Vor- und Nachteile der Verwendung von WebP-Images auf deiner Website

Vorteile von WebP-Bildern:

Bilder sind eine der Hauptursachen für die Verlangsamung der Seitengeschwindigkeit, da sie in der Regel den Großteil der Seitengröße ausmachen, sodass jedes Bit hilfreich ist.

Im SEO-Land wissen wir, dass Geschwindigkeit einen direkten Einfluss auf Rankings und Conversions haben kann. Daher ist die Verwendung von WebP absolut sinnvoll.

Bilddateien nehmen Speicherplatz in Anspruch, egal, wie sie gespeichert werden. Je mehr Bilder und andere Medien du zu deiner Website hinzufügst, desto höher ist die Wahrscheinlichkeit einer verzögerten Leistung. Es ist unglaublich wichtig, dass deine Seiten schnell geladen werden, da langsame Geschwindigkeiten die Besucher abhalten, bevor sie überhaupt gesehen haben, was du zu bieten hast.

Durch das Komprimieren von Bilddateien werden sie kleiner und effizienter, sie gehen jedoch in der Regel mit einem Qualitätsverlust einher. Je stärker du ein Bild komprimierst, desto schlechter sieht es aus. Der von dir verwendete Dateityp hat jedoch einen Einfluss darauf, wie extrem der Effekt ist.

Bilder, die in einem WebP-Format gespeichert wurden, können bei gleicher Qualität wesentlich kleiner als JPEGs und PNGs werden. Wiederum funktionieren verlustfreie WebP-Images als Ersatz für PNG-Dateien und die Dateien sind etwa 26% kleiner. Auf der anderen Seite sind verlustbehaftete WebP-Bilder um 25-34% kleiner als JPEGs.

Bemerkenswert ist auch, dass beide Arten von WebP-Bildern Transparenz unterstützen. Transparente Bilder sind im Web unglaublich nützlich. Du kannst sie beispielsweise für Logos und andere Marken verwenden. JPEGs bieten keine Transparenz als Funktion, verlustbehaftete WebP-Bilder jedoch.

Nachteile von WebP-Images

Wenn WebP so viele Vorteile bietet, warum wird es nicht von mehr Websites genutzt? Der Hauptnachteil ist, dass WebP-Bilder derzeit nicht von allen Browsern unterstützt werden, obwohl immer mehr Browser in letzter Zeit Unterstützung hinzugefügt haben.

Aufgrund der eingeschränkten Browserunterstützung benötigst du derzeit für jedes Bild eine alternative Version.

Hier ist ein Vergleich der aktuellen Browser Unterstützung ab Dezember 2018 zusammen mit jedem Browser Desktop und mobilem Marktanteil:

Support WebP:

Chrome – 67% Desktop / 53% Mobile
Firefox (nur Desktop) – 11%
Edge – 4% Desktop
Opera – 2% Desktop / 4% Mobile
Samsung Internet – 6% mobil
Baidu-Browser

Keine WebP-Unterstützung:

Safari – 5% Desktop / 22% Mobile
Internet Explorer – 7% Desktop
Firefox für Android – <1% mobil
UC-Browser für Android – 9% mobil

Während die meisten Webbrowser nun WebP-Unterstützung bieten, gibt es immer noch einige Browser, die keine Unterstützung bieten (vor allem Safari).

Wie schon erwähnt, spielt das aber keine alllzu große Rolle, da du einfach PNG- oder JPEG-Bilder alternativ hinzufügen kannst, die Besuchern mit nicht kompatiblen Browsern angezeigt werden. Dies erfordert lediglich etwas mehr Arbeit.

Wie du WebP in WordPress einbindest

WordPress unterstützt WebP nicht von Haus aus. Die gängigsten Bildformate (JPEG, GIF, PNG & ICO) werden zwar unterstützt, das WebP-Format kannst du allerdings nur mit einem Plugin einfügen. Du kannst also nicht etwa einfach eine WebP Datei in deine Medien-Bibliothek hochladen.

WebP Plugins für WordPress

Der Vorteil der Einbindung von WebP in WordPress mittels Plugin liegt darin, dass du deine sonstigen JPEGs oder PNGs nicht extra speichern brauchst. Hier sind also einige der bekanntesten und auch von uns genutzten Plugins, die wir gerne vorstellen. Wir zeigen dir auch, wie du konkret WebP Bilder konvertierst und in deine WordPress Website einbindest.

Plugin EWWW Image Optimizer

Das Plugin EWWW Image Optimizer ist eine einfache Methode WebP in deine WordPress Installation einzubinden. Die Konvertierung zu WebP übernimmt das Plugin automatisch. Technisch passiert dies über die exec() Funktion auf dem Server. Unterstützt dein Server diese Funktion nicht, kannst du lediglich bei deinem Webhoster nachfragen, ob dieser diese Funktion für dich aktiviert.

Bitte vorher immer ein Backup deiner WordPress Installation erstellen: z.B. mit dem Backup Plugin „Duplicator“.

– Installiere das EWWW Image Optimizer Plugin
– Unter Einstellungen -> EWWW Image Optimizer findest du die Einstellungen
– Unter WebP das Häkchen bei “JPG/PNG nach WebP” aktivieren

Falls bereits Bilder hochgeladen wurden, bevor das Plugin installiert wurde, werden diese standardmäßig nicht umgewandelt. Um dies nachzuholen, klick unter “Medien” auf “Massenoptimierung”.

Damit alle Bilder erfasst werden, aktiviere das Häkchen vor dem Scannen bei “Bereits optimierte Bilder werden standardmäßig übersprungen“.

Alle weiteren Einstellungen sind eigentlich selbsterklärend.

Nach Fertigstellung der Konvertierung ist nur noch deine .htaccess anzupassen. Normalerweise übernimmt das Plugin diesen Schritt. In den Einstellungen -> EWWW Image Optimizer direkt unter dem “Änderungen speichern”-Button klicke einfach auf den Button “Setze Rewirte-Regeln ein” und das Plugin setzt den erforderlichen Code in deine .htaccess ein. Das Plugin zeigt dir dann eine grüne Flagge an. Falls eine rote Flagge angezeigt wird, musst du deine .htaccess händisch editieren.

Wenn auf deinem Server die exec() Funktion nicht verfügbar ist, kannst du das EWWW Image Optimizer Plugin nicht (kostenlos) nutzen. Dann hast du nur die Möglichkeit, die WebP Konvertierung über die kostenpflichtige API von EWWW Image Optimizer vorzunehmen.

Plugin WebP Express

Eine Alternative ist das kostenlose Plugin „WebP Express“. Nach der Installation des Plugins kannst du die Konfiguration unter -> Einstellung vornehmen.

Die ersten Grundeinstellungen kannst du im Prinzip so belassen. Zur Sicherheit immer vorher ein Backup deiner WordPress Website erstellen!

Als Konvertierungs-Algorithmus empfiehlt sich die Methode “ImageMagick”. Du kannst dann alle anderen Methoden deaktivieren. Es können aber auch mehrere Methoden zur Konvertierung aktiv belassen werden. WebP Express benutzt immer die oberste Methode zuerst. Im Fall, dass diese nicht funktioniert, wird die jeweils nächste aktivierte Methode darunter benutzt.

Die Voreinstellungen der Konvertierungsqualität für den normalen Gebrauch reichen aus.

Wenn alles eingestellt ist, klickst du auf den Button “Bulk-Convert”, damit die bereits vorhandenen Bilder in WebP Bilder konvertiert werden.

Das Plugin WebP Express setzt automatisch den erforderlichen Eintrag in die .htaccess. Die Option unter “Alter HTML” sollte noch aktiviert werden, damit der HTML-Code optimiert wird. Dabei wird das  img-tag durch das picture- tag im Quellcode ersetzt. Auf diese Weise werden den Browsern zwei verschiedene Varianten deiner Bilder zur Verfügung gestellt. Kompatible Browser können jetzt das WebP Bild auswählen und niocht kompatible Browser können weiterhin die JPG bzw. PNG-Bild Datei verwenden.

Fazit

WebP ist ein Bilddateityp, der das Potenzial hat, deine Website erheblich zu beschleunigen, weit mehr als durch die Verwendung komprimierter PNGs oder JPEGs. WebP gibt es sowohl in verlustbehafteten als auch in verlustfreien Varianten und erzeugt kleinere Dateigrößen bei vergleichbarer Qualität.

Du willst eine ausführliche Beratung zum Thema „WebP“?

Jetzt anfragen
JoeWP WordPress Agentur - Projekt anfragen

Du willst Deine Website auf Herz und Nieren prüfen lassen?

Wir checken Deine Website und senden Dir die Ergebnisse zu.

Website Check anfragen