Zum Inhalt springen

WebP – das Bildformat von Google

WebP Bildformat von Google

INFO: WebP ist das Bildformat für das Internet, das Google 2010 vorgestellt hatte. Der Vorteile von WebP gegenüber JPEG und PNG ist eine kleineren Dateigröße, also schnellere Ladezeiten von Webseiten. Im englischen Sprachraum wird WebP übrigens als »webby« ausgesprochen. Neben WebP gibt es noch das Format WebM für Videodatei, wobei das »M« für Movie steht.

Inhaltsverzeichnis

Vorteile von WebP

Das Bildformat von Google WebP hat natürlich seine Vorteile. Dazu zählen:

  • Verlustfreie und verlustreiche Komprimierung.
  • Transparenz.
  • Animation/bewegtes Bild (siehe Beitrag »bewegtes Bild«).
  • Kleinere Bildgröße als JPG oder PNG.

Nachteile und Grenzen von WebP

  • Keine Unterstützung durch ältere Webbrowser und Programme (s. u.).
  • Bildgröße maximal 16,383 × 16,383 Pixel, das ist viel weniger, als JPG kann.

Bildbearbeitungsprogramme, die WebP unterstützen

Obschon die folgenden Grafikprogrammen (Stand-)Bilder (Einschränkungen in den Klammern) im WebP-Format öffnen und speichern, …

allerdings gibt es bei allen anderen Adobe-Programmen, CorelDraw und anderen Programmen von Corel aktuell keine Unterstützung für WebP.

WebPShop – ein WebP-Plug-In für Photoshop

Für Photoshop CC 2021 gibt es das kostenloses Plug-in WebPShop, das WebP öffnen und speichern kann. Ist das Plug-in installiert, dann …

A gehen Sie wie gewohnt unter Datei > Speichern unter…

B Wählen als Dateiformat WebP aus.

C Stellen die Qualität des Kompression ein, hier 50 %.

D Mit der Funktion Preview sehen Sie vorab das Ergebnis der Kompression.

WebPShop ein Plug-In für Adobe Photoshop zum Öffnen und Speichern von WebP-Dateien
WebPShop ein Plug-In für Adobe Photoshop zum Öffnen und Speichern von WebP-Dateien

WebP verlustfrei (lossless) speichern

Wenn Sie ein Bild mit einem Kompressor verlustfreie speichern, dann werden beim Komprimieren der Bilddatei keine Informationen aus dem Bild entfernt oder verändert. Diese Art der Kompression erzeugt also Dateien, deren Bildqualität dem des Originals entspricht. Mein Testfoto mit der Auflösung 2048 x 1365 Pixel hat als PNG 5,4 MByte. Das verlustfreie WebP-Bild kommt auf 4,5 MByte. Somit hält sich die Ersparnis bei der Datenmenge in Grenzen. 

WebP im Vergleich zu PNG und tinyPNG
Im Vergleich: Original PNG, tinyPNG und drei WebP; Fotomotiv: Rettershof, Kelkheim (Taunus).

1 Zeigt die Sonnenuhr aus dem Orginalfoto.

2 Zeigt die Sonnenuhr nach dem Speichern des WebP-Bildes mit 30 % Qualität. Es lassen sich Verpixelungen erkenne, wie man sich auch als JPEG-Bilder kennt.

TinyPNG als Alternative zu WebP

Es gibt für Photoshop CC 2021 eine alternative Erweiterung mit Namen tinyPNG bzw. Online-Konvertierung. TinyPNG speichert ein Bild als PNG-Datei und reduziert dabei die enthaltenen Farben. Mein Testfoto kommt so auf 1,6 MByte.

WebP mit 50 % Qualität speichern

Wenn ich mein Testbild mit 50 % Qualität als WebP speichere, dann ist die Datei nur noch 0,4 MByte. Eine Verschlechterung des Bildes ist auf den ersten Blick nicht erkennbar. Auffallend ist jedoch, dass WebP-Bilder, die mit WebPShop in Photoshop gespeichert werden an Brillanz verlieren. Mit Krita 4.4 ist das nicht der Fall.

Gratis Konvertierungsprogramm von und nach WebP

Ein Konvertierungsprogramm von und nach WebP ist XNView, das Sie unter macOS und Windows kostenlos einsetzen können.

Animationen mit WebP

Das Bildformat von Google WebP unterstützt außerdem auch Animationen, wie man es auf GIF-Animationen kennt. Mehr dazu in meinem Betrag »bewegtes Bild«. In den Animationsprogramme Adobe Animate CC 2021, Cartoon Animator 4.5, OpenToonz 1.5, SynfigStudio 1.4, ToonBoom Harmony 20 sucht man den Export im Format WebP vergeblich. Es scheint jedoch eine ganze Branche dieses Format zu ignorieren. Eine kleine Ausnahme ist Moho 13.5, es kann WebP als Bildsequenz schreiben, jedoch nicht als Animation.

Wer trotzdem eine Bildsequenz im WebP-Format haben möchte, der braucht ein passendes Konvertierungsprogramm wie

oder schließlich einen der zahlreichen Online-Konvertierungsdienst. (Fragen Sie Google.)

WebP-Animationen können ab WordPress 5.8 geladen und abgespielt werden
WebP-Animationen können ab WordPress 5.8 geladen und abgespielt werden.
Sehen Sie hier kein Bild, dann unterstützt Ihr Browser das Dateiformat WebP nicht.

WebP in Layoutprogrammen und Schreibprogrammen

Auch wenn WebP ursprünglich für das Internet gedacht ist, gibt es auch Layoutprogrammen und Schreibprogrammen, die WebP importieren können. Daher entfällt die lästige Konvertierung.

WebP im E-Book?

Es wäre wünschenswert, wenn auch im E-Book Bilder mit weniger Datenverbrauch zur Verfügung ständen, aber STOPP die Formate ePub2, ePub3 und kindle unterstützen das Bildformat WebP nicht.

Webdesign-Programm und CMS für WebP

  • Adobe Dreamweaver CC 2021 öffnet keine WebP-Dateien, dennoch können Sie ein WebP-Bild mit dem HTML-Tag <img src=""> manuell einfügen.

Website basieren heute meist auf einem Content-Management-System (CMS).

Empfohlen wird jedoch für WebP in HTML der Tag <picture src="">, sodass ein Alternative (Fallback) angezeigt werden kann in älteren Webbrowsern.

WebP in Websites verwenden

Ferner können folgende Webbrowser können WebP ohne Erweiterung darstellen:

  • Android Browser
  • Chrome, mac, win
  • Edge 18+, mac, win
  • Firefox 65+, mac, win
  • Opera, mac, win
  • Safari 14+ erst unter macOS 11+; Teil des Betriebssystems.

Fazit

Das Bildformat WebP von Google ist sehr interessant. Wer WebP für seine Website erstellen und benutzen will, der kann dies beispielsweise mit dem kostenlosen Bildbearbeitungsprogramm Krita tun. Das Programm kann WebP als Standbild lesen und schreiben, dabei ist die Qualität den Einstellungen entsprechend. Außerdem kommt es im Gegensatz zum Photoshop mit Plug-in nicht zu Veränderungen in den Farben.
ACHTUNG: Zu beachten ist jedoch, dass ältere Webbrowser WebP nicht darstellen können.
TIPP: Alternativ können Sie tinyPNG nutzen, denn PNG-Datei werden von jedem Webbrowser dargestellt. Das reduzierte tinyPNG ist außerdem in E-Books (ePub und kindle) einsetzbar. 

Schlagwörter: