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.

Du willst mehr darüber wissen? Wir erklären es dir hier!

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.

So implementierst du WebP in WordPress:

Es gibt mehrere Optionen, um WebP-Bilder auf deiner WordPress-Site mittels Plugins einzustellen.

JETPACK
Wenn du Jetpack bereits verwendest, hast du die Option, WebP in Jetpack einzusetzen. Das Plugin ist kostenlos.

SHORTPIXEL
ShortPixel ist eine kostenlose Option für die Bildkonvertierung in das WebP-Format. Wenn du jedoch eine große Anzahl von Bildern gleichzeitig stapelweise verarbeiten möchtest, ist das kostenpflichtig.

EWWW IMAGE OPTIMIZER
EWWW Image Optimizer ist ein kostenpflichtiger Service.

OPTIMUS HQ
Optimus HQ ist ein kostenpflichtiges Plugin, das eine unbegrenzte Bildoptimierung ermöglicht.

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. Die Grundprüfung ist für Dich unverbindlich und kostenlos!

Website Check anfragen