Die Seitengeschwindigkeit (Pagespeed) wird heutzutage als eines der wichtigsten Bewertungskriterium einer guten Website gewertet. Neben gut komprimierten Codierungen und verlässlichem Caching wird die Komprimierung von Bildern als effizientester Weg zur Pagespeed-Optimierung genannt. Für Letzteres stellen wir Dir in diesem Beitrag eine Möglichkeit vor, wie Du Deine Bilder mit einem einfachen Trick optimieren kannst. Dazu werden die statischen und animierten Bilder, welche auf Deiner Website integriert sind, ganz einfach in ein spezielles Format umgewandelt. Dieses Format nennt sich WebP.

Was ist WebP?
Bei WebP handelt es sich um ein Grafikformat, welches bereits im Jahr 2010 von Google vorgestellt wurde und statische sowie animierte Bilder auf Deiner Website sehr effizient komprimiert. Bei der Komprimierung gibt es jedoch einen Unterschied, ob es sich um ein JPEG-Format oder ein PNG-Format handelt. Bei JPEG Bildern entsteht ein gewisser Qualitätsverlust, während bei PNG die Qualität der Bilder nicht minimiert wird. Vor allem bei detailarmen, gleichförmigen Bildern ist dieses Format daher besonders effektiv. Die Speicherplatz-Einsparung im WebP Format liegt bei ca. 30 Prozent, was sich sehr stark auf den Pagespeed Deiner Website auswirkt.

Unterstütze Browser
Seit diesem Jahr unterstützt auch Firefox (ab Version 65 WebP) das Format. Damit ist die Unterstützung von WebP einen Schritt weiter. Jedoch fehlen zur universellen Nutzung noch die Browser von Apple (Safari) und Microsoft (Internet Explorer). Apple ist aber gemäss aktuellen Meldungen bereits an diversen Tests, um in Zukunft ebenfalls WebP darstellen zu können. Internet Explorer User müssen sich (wie bei viel Sachen), noch gedulden. Auch diverse Messenger Programme wie Telegram oder WhatsApp verwenden diese Technologie beispielsweise für ihre GIFs. Folgende Browser unterstützen WebP Bilder bereits:

  • Chrome
  • Opera
  • Edge ab Version 1908 (RS5)
  • Firefox (ab Version 65 WebP)

Doch was passiert mit den Bildern, wenn WebP von den Browsern nicht unterstützt wird? Dafür gibt es eine ganz einfache Lösung: Solange Du deine WebP-Konfigurierung sauber aufbereitest, wird dann ganz einfach das normale JPEG oder PNG dargestellt. Vereinfacht heisst das, wenn die Website auf einem Browser mit WebP Unterstützung trifft, so spielt es auch diese Formate aus. Sobald sie nicht dargestellt werden, so wird automatisch das Original als JPEG oder PNG angezeigt. Bei einer Komprimierung der Bilder auf WebP kannst Du also nur gewinnen. Dies sieht man auch, wenn man einen Blick auf die Marktanteile der einzelnen Browser in der Schweiz wirft:

Über die Hälfte alle Website-Besucher verwenden dabei einen Browser, welcher zum aktuellen Zeitpunkt bereits WebP unterstützt.

Heutige Websites werden immer nach dem Mobile First Ansatz entwickelt. Bei den Mobile Browsern ist der Marktanteil ähnlich wie im Overall-Vergleich. Auch hier unterstützen rund 50 Prozent aller Visits das Format.

 

WebP im Vergleich
Vor über 25 Jahren wurde das Format JPEG erfunden und noch immer ist es nicht aus dem Webdesign wegzudenken. Der grosser Vorteil: Durch die verlustbehaftete Komprimierung spart das JPEG Format erheblich mehr Speicherplatz ein als beispielsweise die PNG Formate. In diesem Bereich erweist sich WebP jedoch als noch effizienter und flexibler. Erstens bietet WebP neben der verlustbehafteten auch eine verlustfreie Methode der Komprimierung an. Zweitens ist die Einsparung von Speicherplatz bei WebP noch effizienter und macht den Pagespeed dadurch noch besser.

WebP JPEG
Veröffentlichung 2010 1992
Dateiendung(en) .webp .jpeg, .jpg
Maximale Auflösung (in Pixel) 16’383 x 16’383 65’535 x 65’535
Komprimierung (verlustfrei) ja nein
Komprimierung (verlustbehaftet) ja ja
Transparenz (Alphakanal) ja nein
RGB-Farbraum ja ja
Animationen möglich ja nein
Unterstützende Anwendungen limitiert (u. a. Chrome, Opera, Gmail, IrfanView) universell

Quelle: www.ionos.de

Wie Du siehst, kommt es bei JPEG vor allem darauf an, wie gross das Bild auf Deiner Website dargestellt wird. Je grösser das Bild ist, desto stärker ist der Qualitätsverlust sichtbar. Bei kleinen Bildern ist dieser kaum zu sehen. Hier ein Beispiel:


Quelle: https://www.andrewmunsell.com/blog/png-vs-webp/

Bei PNG-Formaten hat die Umstellung auf WebP keinen Einfluss auf die Qualität:


Quelle: https://www.andrewmunsell.com/blog/png-vs-webp/


Fazit:
Dass sich WebP für die Komprimierung der Bilder auf Websites lohnt, macht auf jeden Fall Sinn. Der Pagespeed wird dadurch stark verbessert, was sich nicht nur auf die Besucherzufriedenheit, sondern auch positiv auf die Analyse von Google und das SEO Ranking auswirkt. Der klare Brennpunkt ist die Unterstützung des Formats durch die Browser. Hier ist jedoch der Aufwärtstrend klar zu erkennen. Sobald auch Apple auf den Zug aufgesprungen ist, wird das Format im Schnitt bei 4 von 5 Website-Besuchern dargestellt. Da die Grafik bei den aktuell nicht unterstützenden Browsern einfach als JPEG oder PNG angezeigt wird, gibt es jedoch hier keinen grossen Nachteil. Damit empfehlen wir die Konvertierung auf WebP allen Kunden, welche ihren digitalen Auftritt noch weiter verbessern möchten.