Das WebP-Bildformat
WebP-Bilder erstellen und mit HTML einbauen

Das WebP-Bildformat von Google ist ein modernes Bildformat, das eine hervorragende verlustfreie und verlustbehaftete Kompression für Bilder im Web bietet. WebP ist ein offener Standard, der Webseiten durch kleinere Bilder beschleunigen kann und soll. Der Browser Chrome unterstützt WebP bereits seit Ende 2010.

Verlustfreie WebP-Bilder sind im Vergleich zu PNG-Bildern in der Regel 26 % kleiner. Verlustbehaftete WebP-Bilder sind bei gleichem SSIM-Qualitätsindex 25-34 % kleiner als vergleichbare JPEG-Bilder. Weiter unten siehst Du ein paar WebP-Beispiele.

Das verlustfreie WebP unterstützt Transparenz (auch als Alphakanal bekannt) zu einem Preis von nur 22 % zusätzlicher Bytes. In Fällen, in denen eine verlustbehaftete RGB-Kompression akzeptabel ist, unterstützt verlustbehaftetes WebP auch Transparenz und bietet im Vergleich zu PNG in der Regel eine dreimal kleinere Dateigröße.

Auch Animationen sind mit WebP möglich. Verlustbehaftete, verlustfreie und transparente Bilder werden alle in animierten WebP-Bildern unterstützt, die im Vergleich zu GIF eine geringere Dateigröße aufweisen können.

Die Vorteile von WebP auf einen Blick

Alle modernen Browser unterstützen heute laut CanIuse.com den Einsatz von WebP, also in 96.86% aller Browser im Einsatz¹. Das liegt einfach an diesen bestechenden Vorteilen.

• verlustbehaftet Kompression
• verlustfreie Kompression
• Transparenz
• Metadaten: WebP kann EXIF- und XMP-Metadaten enthalten
• WebP ermöglicht Animationen

Bilder ins WebP-Format konvertieren

Um schnell mal ein Bild in eine WebP-Bilddatei zu verwandeln, kannst Du unkompliziert einen Online-Konverter nutzen. Möchtest Du jedoch gleich einen ganzen Stapel an Bildern konvertieren, benötigst Du ein Werkzeug.

Ich empfehle dafür das Kommandozeilenwerkzeug ImageMagick, dass Dir nicht nur WebP-Bilder konvertiert, sondern so gut wie jedes populäre Formate. Mehr zu ImageMagick liest Du weiter unten.

Online-Konverter

Convertio

Zamzar

Desktop-Programme

Gimp mit Plugin ( Anleitung)

WebPShop: Plug-in zum Öffnen und Speichern von WebP-Bildern direkt in Adobe Photoshop

Kommandozeile

ImageMagick

WebP-Bilder einbauen mit dem <picture>-Tag

Natürlich kannst Du WebP-Bilder direkt mit dem <img>-Tag einbauen. Problematisch wird es aber dann, wenn der Browser des Nutzers WebP nicht unterstützt. Dann wird kein kein Bild angezeigt.

Um diesem Problem vorzubeugen nutzt Du darum besser das <picture>-Tag. Mit dem <picture>-Tag überlässt Du dem Browser die Wahl. Unterstützt der Browser WebP-Bilder – z.B. Chrome – dann wählt und lädt Chrome das Webp-Bild. Kennt der Browser das Bildformat nicht, greift dieser dann wiederum auf das »normale« JPG-Bild zurück.

Das sieht dann so aus:

<picture>
  <source srcset="img/katze.webp" type="image/webp">
  <img src="img/katze.jpg" alt="Beschreibung des Fotos">
</picture>

WebP-Bilder konvertieren mit ImageMagick

ImageMagick akzeptiert eine Fülle von Kodierungsoptionen. Hier drei Beispiele:

Konvertiere katze.jpg nach WebP mit der Qualität 50 %.

Konvertiere katze.jpg in die verlustlose WebP-Version.

Konvertiere katze.jpg mit einer ähnlichen Kompression der Originaldatei, aber mit weniger Verschlechterung.

WebP-Beispielbilder

Die folgenden Bilder zeigen das Original JPG sowie die verschiedenen Version. In der Bildunterschrift findest Du die aktuelle Dateigröße. Um die Bilder richtig zu vergleichen, öffnest Du diese am Besten in einem separaten Tap.