Sie sind hier: Startseite · Artikel · webp

WebP, der heilige Gral für weboptimierte Bilder?

Seit 2010 gibt es WebP, ein Grafikformat für verlustbehaftet oder verlustfrei komprimierte statische oder animierte Bilder. WebP liefert bessere Komprimierung, also kleinere Dateien, bei gleichzeitig besserer Qualität, im Vergleich zu JPEG.
Das folgende Beispiel soll als Beleg für diese Aussage gelten.

Format	Dateigröße
JPEG	4,6 MB
JPEG m. ImageOptim	1,2 MB
WebP	238 kB

Das Bild misst in allen Formaten 3008 x 1960 px. Damit es innerhalb dieser Demo in voller Größe dargestellt werden kann, wird Scrollen erzwungen.

Foto: Wikipedia United States Air Force photo by Senior Airman Joshua Strang
Diese Datei ist ein Werk eines Angestellten der U.S. Air Force, das im Verlauf seiner offiziellen Arbeit erstellt wurde. Als ein Werk der Regierung der Vereinigten Staaten ist diese Datei gemeinfrei.

Fotos zu WebP konvertieren:

• Online z. B. auf bild.online-convert.com/de/
• Offline mit einem Tool wie z. B. (für Mac) xnConvert
• Stand 2023 ist das beste Tool wohl Sqoosh. Online hier: https://squoosh.app. Oder hier App downloaden.

Ergebnisse

80 % bessere Komprimierung als JPEG mit ImageOptim – das klingt tatsächlich fantastisch. Wenn …

1. WebP auch von Safari unterstützt würde. Da WebP eine Entwicklung von Google ist, Safari aber Apple, wird sich daran vermutlich auch in Zukunft nichts ändern.
2. WebP von Adaptive Images unterstützt würde.

Ersteres erfordert die – aufwändige – Fallback-Lösung via picture-Tag:

<picture> <source srcset="img.webp" type="image/webp"> <img src="img.jpg" alt="Polarlicht"> </picture>

Die mangelnde Unterstützung von Adaptive Images wiegt noch schwerer. Ich sehe derzeit nicht, wie WebP und/oder das picture-Tag mit Adaptive Images zusammenarbeiten könnte. Aus diesem Grund ist wohl WebP leider nicht der "heilige Gral".

Im Klartext: Adaptive Images erzeugt für Smartphones automatisch ein in der Größe angepasstes Bild. Für obiges Beispiel ist dieses größenangepasste Bild 480 x 313 px "klein", und "wiegt" nur noch 15 kB. Das ist natürlich um Größenordnungen besser als das WebP-Bild mit seinen 238 kB.

Nachtrag 15.09.2020

Mit der zukünftigen Version 14 wird endlich auch Safari WebP unterstützen. Siehe caniuse.com. Interessanterweise wird praktisch zeitgleich auch das brandneue Grafikformat AVIF angekündigt, das noch bessere Kompression verspricht. Jake Archibald hat darüber einen Artikel verfasst.

Ein kurzer Test mit dem Online-Komprimierungstool Squoosh bestätigt das Versprechen von AVIF: Die obige Mustergrafik kann tatsächlich von 4,6 MB auf 23,1 kB komprimiert werden. Also 98% kleiner! als das Original-jpg, und gegenüber WebP noch einmal um den Faktor 10 kleiner!

Nachtrag 19.06.2023

Die Browserunterstützung bei modernen Grafikformaten hat sich innerhalb weniger Jahre deutlich verbessert. Alle Browser außer den Microsoft-Produkten Edge und IE unterstützen avif, alle Browser außer dem IE unterstützen webp, es fehlt also nur die Unterstützung durch den IE.

Weil avif wirklich überzeugende Kompressionsraten generiert, werde ich in Zukunft avif priorisieren, und als Fallback webp, sowie für den IE – zumindest b.a.w. noch – jpg bzw. png anbieten.
Die Fallback-Lösung wird mit dem picture-Tag realisiert, wie folgt:

<picture> <source type="image/avif" srcset="bild.avif"> <source type="image/webp" srcset="bild.webp"> <img src="bild.png" alt="hier Alternativtext"> </picture> In Zwischenablage kopieren

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

1. HaJo schrieb am Montag, 26.08.19 16:54 Uhr:

   Was nicht von allem Browsern, gleich welcher Konzern, fehlerfrei dargestellt werden kann, ist uninteressant. Google hat eh schon viel zu viel Macht, der Versuch, wieder eine "Google only" Lösung durchzusetzen, muss bitte doch scheitern.