WebP: Mehr Speed für Ihre Website dank kleineren Bilddateien

Philipp Zeder
Autor:

Philipp Zeder

Kategorie:

in

Entwicklung & Performance

Veröffentlicht am 25. Jan. 2017

Aktualisiert am 7. März 2024

Auch wenn die verfügbaren Bandbreiten von Internetanschlüssen immer grösser werden: Dateigrössen zu optimieren lohnt sich. Je weniger Bits über das Netz verschickt werden müssen, umso besser. Gerade bei Bildern ist oft noch Optimierungspotenzial vorhanden. Das Bildformat WebP soll besser als JPEG und PNG sein. Doch stimmt das wirklich?

WebP: Mehr Speed für Ihre Website dank kleineren Bilddateien

Die Geschichte

WebP wurde 2010 erstmals der Öffentlichkeit vorgestellt und seither konstant weiterentwickelt. Hinter dem Projekt steht Google, das mit dem Videoformat VP8 den Grundstein für das neue Bildformat gelegt hatte.

WebP unterstützt sowohl eine verlustbehaftete (lossy) als auch eine verlustfreie (lossless) Komprimierung und kann für statische und animierte Bilder genutzt werden. Damit kann WebP die drei im Web genutzten Bildformate JPEG, PNG und GIF ersetzen.

Wieviel spart WebP ein?

Google hat im Vergleich zu JPEG im Schnitt 25%-34% kleinere Dateigrössen gemessen. Und das bei gleichem SSIM-Index. Das heisst, die WebP-Bilder verfügen trotz kleinerer Dateigrösse über die gleich wahrgenommene Qualität wie die JPEG-Versionen.

Gegenüber PNGOUT, das PNG-Dateien komprimiert, hatten die Google-Ingenieure Dateigrösseneinsparungen von durchschnittlich 26% gemessen. Vor allem für bildlastige Websites ein schlagendes Argument für WebP. Mit den Tools ImageAlpha und ImageOptim konnten wir in unseren Tests jedoch noch kleinere Dateien im PNG-Format erzeugen, als das mit WebP der Fall war.

Kritik von Experten

Längst nicht alle Experten sind von WebP überzeugt. Kritiker zweifeln den Nutzen des Dateiformats im Alltagsbetrieb an. So sind WebP-Dateien zwar kleiner als Dateien, die ihre älteren Konkurrenzformate produzieren, verbrauchen auf dem Gerät des Betrachters hingegen auch mehr Rechenzeit bei der Darstellung. Unter Umständen schmilzt damit der durch die geringere Dateigrösse erzielte Geschwindigkeitsvorteil dahin.

Ausserdem wird kritisiert, dass mit neueren Algorithmen auch mit JPEG und PNG vergleichbar kleine Dateigrössen möglich sind. Ein weiteres Format sei damit unnötig. Die noch geringe Verbreitung zeigt sich auch im Livebetrieb: Benutzer kennen JPEG und PNG und können die Formate mit all ihren Geräten anzeigen. WebP hingegen wird nur von den Browsern Chrome und Opera ohne Plugins verstanden. Schickt ein Benutzer z.B. ein WebP-Bild per E-Mail an einen Empfänger, kann dieser oft nichts mit der Datei anfangen.

WebP auf der eigenen Website nutzen

Mit wenig Aufwand können Sie den Besuchern, die mit einem WebP-kompatiblen Browser unterwegs sind, die passende Datei anzeigen. So funktioniert’s:

Mit WordPress

Für das beliebteste CMS unserer Kunden stehen zwei Plugins zur Verfügung, mit denen sich mit wenigen Klicks WebP-Support einbauen lässt. Kombinieren Sie das Bildoptimierungsplugin Optimus und das Caching-Plugin Cache Enabler um ganz einfach WebP-Bilder auszuliefern, wenn der Browser Ihres Besuchers das Dateiformat unterstützt.

Übrigens: Wir nutzen Optimus und Cache Enabler in unserem Blog. Wenn Sie diesen Beitrag mit Chrome oder Opera lesen, sind die Bilder im WebP-Format eingebunden.

Mit Joomla

Im Einsatz mit Joomla hilft das Plugin WebP for Joomla. Es konvertiert zum einen Bilder aus den Formaten JPEG und PNG und stellt zum anderen sicher, dass die Dateien nur an Browser ausgeliefert werden, die das Format unterstützen.

Das Plugin setzt für die Umwandlung auf die GD Library, die bei allen von uns angebotenen PHP-Versionen integriert ist und den nötigen WebP-Support mitbringt.

Unterstützung selbst erkennen

Ob Ihre Besucher mit einem Browser unterwegs sind, der WebP unterstützt, können Sie mit einer Rewrite-Regel in der .htaccess-Datei erkennen:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(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

Quelle: Ilya Grigorik

Kann der Browser WebP darstellen, erhält er mit dieser Regel automatisch das Bild mit der passenden Dateiendung. Das bedingt, dass Sie Ihre Bilder zusätzlich im WebP-Format auf dem Server ablegen. Am einfachsten erreichen Sie das mit einem Dienst wie Optimus, der sich über eine API ansprechen lässt und bestehende JPEG- und PNG-Bilder nach WebP konvertiert. Oder Sie konvertieren die Bilder bereits, bevor Sie sie auf den Server laden. Eine ganze Menge von Bildbearbeitungsprogrammen unterstützt WebP übrigens von Haus aus. Darunter Apps wie Sketch, Pixelmator und GIMP. Bringt Ihre favorisierte Software keine native Unterstützung mit, lässt sie sich oft mit einem passenden Plugin erweitern.

Fazit

Die Formate PNG und JPEG mag WebP zwar nicht komplett ersetzen, dazu fehlt die nötige Unterstützung in Browsern wie Firefox, Safari oder IE. Nutzen Sie ein Content-Management-System wie WordPress oder Joomla, genügt aber bereits die Installation eines Plugins um Ihre Website mit WebP auszustatten und je nach Besucher die passende Datei auszuliefern.

Steht für Ihr CMS kein Plugin zur Verfügung oder bauen Sie Ihre Website manuell? Dann ist der Aufwand ein wenig grösser, um WebP in Ihren Workflow einzubauen. Dieser Zusatzaufwand lässt sich jedoch gut automatisieren.

Beteilige dich an der Diskussion

7 Kommentare

Amir Mansoor
Amir Mansoor 27. Dez. 2019 11:20

Hallo, inzwischen nutzt sogar der Schweizer Kaffeeautomatenhersteller Jura auf seiner Homepage das Wepb-Format. Auf WordPress-Seiten funktioniert das kostenpflichtige Plugin Optimus echt gut. Leider haben wir für Joomla noch keine brauchbare Erweiterung gefunden. Für eine Empfehlung wären wir sehr dankbar.

Viele Grüße!

Remo
Remo 28. Apr. 2019 21:42

WebP wird von Microsoft Edge Version 18 sowie Mozilla Firefox Version 65 nun auch unterstützt:
https://hacks.mozilla.org/2019/01/firefox-65-webp-flexbox-inspector-new-tooling/
https://developers.google.com/speed/webp/faq
https://caniuse.com/#search=webp

NetHawk
NetHawk 16. Feb. 2017 10:15

Mit WebP würde ich mich nicht lange aufhalten, das ist bestenfalls ein Format für eine Übergangszeit (siehe dazu auch Statement der Mozilla-Foundation). Nur schon BPG ist einiges effektiver und der Decoder lässt sich per JavaScript für jeden Browser nachrüsten. Ich setze, bzw. hoffe jedeoch auf FLIF, das neben noch besserer Kompression auch den Vorteil bietet, sowohl Grafiken als auch Fotos optimal zu komprimieren. Ein Format für alle Arten von Bildern also, etwas das Fehlerquellen reduziert (wer kennt nicht grafische Logos als JPEGs?). Zudem ist FLIF frei vom Verdacht Patente zu verletzen (wie bei BPG und WebP). Das Projekt braucht einfach ein paar renommierte Sponsoren damit die Sache vorwärts geht und aus dem Betastadium rauskommt. Immerhin, Cloudinary ist mit an Bord. Man stelle sich vor: man hat eine optimale Lösung für eine Aufgabenstellung und keiner setzt sie ein. Wen’s interessiert: flif.info

David Burkardt
David Burkardt cyon
17. Feb. 2017 09:11

Merci für den spannenden Kommentar. FLIF ist auf unserer Liste für mögliche zukünftige Beiträge gelandet.

Dominic
Dominic 26. Jan. 2017 10:50

Grundsätzlich stellt sich für mich vor allem die Frage, ob sich dieses Format soweit zum Standard entwickelt, dass die anderen Browser nachziehen. Gibt es hier bereits Aussagen von den weiteren Browserentwicklern? Ansonsten stellt sich für mich die Frage nach dem Aufwand/Nutzen…

Philipp Zeder
Philipp Zeder cyon
26. Jan. 2017 16:43

caniuse.com meldet eine weltweite Kompatibilitätsrate von 72%. In der Schweiz ist der Anteil deutlich geringer, was der hohen Dichte von iOS-Geräten geschuldet sein dürfte. Ein Blick auf die eigenen Statistiken schadet auf jeden Fall nicht :)

Ob WebP-Support in Safari und Firefox kommen wird, scheint noch nicht definitiv entschieden zu sein.

Hirbod
Hirbod 21. März 2017 16:33

Firefox hat Support bereits angekündigt:
https://bugzilla.mozilla.org/show_bug.cgi?id=1294490