Was ist WebP? Kompletter Leitfaden zum Bildformat

Was ist WebP und wer hat es entwickelt?

WebP ist ein modernes Bildformat, das von Google im Jahr 2010 entwickelt wurde. Es basiert auf dem VP8-Video-Codec (für verlustbehaftete Komprimierung) und verwendet einen eigenen Algorithmus für verlustfreie Komprimierung.

Das Ziel von WebP war einfach: kleinere Bilddateien bei gleicher oder besserer Qualität als JPG und PNG. Nach über einem Jahrzehnt der Entwicklung hat WebP dieses Versprechen eingelöst und sich als de-facto-Standard für Webbilder etabliert.

WebP vereint die Stärken von JPG und PNG in einem Format: verlustbehaftete Komprimierung für Fotos (wie JPG), verlustfreie Komprimierung für Grafiken (wie PNG), Transparenz (wie PNG) und sogar Animation (wie GIF, aber mit besserer Komprimierung).

Die Konkreten Vorteile von WebP

Die Zahlen sprechen für sich:

• Verlustbehaftete Komprimierung: WebP-Dateien sind durchschnittlich 25-34% kleiner als vergleichbare JPG-Dateien bei gleicher SSIM-Qualität (Structural Similarity Index).
• Verlustfreie Komprimierung: WebP verlustfrei ist 26% kleiner als PNG.
• Transparenz mit Komprimierung: WebP mit Alpha-Kanal ist 3x kleiner als PNG mit Transparenz.
• Animation: Animierte WebP-Dateien sind deutlich kleiner als GIFs und unterstützen bis zu 24-Bit-Farben (GIF ist auf 256 Farben beschränkt).

Für eine typische Webseite mit 20 Bildern kann die Umstellung von JPG/PNG auf WebP die Gesamtbildgrösse um 30-50% reduzieren. Das bedeutet schnellere Ladezeiten, geringere Bandbreitenkosten und bessere Core Web Vitals.

Browserunterstützung: Wo Funktioniert WebP?

Die Browserunterstützung für WebP ist mittlerweile hervorragend:

• Chrome: Seit Version 17 (2012). Vollständige Unterstützung.
• Firefox: Seit Version 65 (2019). Vollständige Unterstützung.
• Safari: Seit Version 14 (2020, macOS Big Sur / iOS 14). Verlustbehaftetes und verlustfreies WebP.
• Edge: Seit Version 18 (2019). Vollständige Unterstützung.
• Opera: Seit Version 12 (2012). Vollständige Unterstützung.

Insgesamt unterstützen über 97% aller Browser weltweit WebP. Die einzigen Ausnahmen sind der eingestellte Internet Explorer und sehr alte Safari-Versionen (vor iOS 14 / macOS Big Sur). Für die meisten Webseiten ist WebP damit bedenkenlos einsetzbar.

WebP Konvertieren: So Geht's

Es gibt mehrere Wege, Bilder in WebP zu konvertieren oder WebP in andere Formate umzuwandeln:

Online-Konvertierung: Unser WebP-Konverter wandelt WebP-Dateien in JPG, PNG oder andere Formate um — direkt im Browser, ohne Upload auf einen Server. Ebenso können Sie mit unserem Bildformat-Konverter jedes Bildformat nach WebP konvertieren.

Google cwebp (Kommandozeile): Google bietet das offizielle Tool cwebp zur Konvertierung an. Der Befehl cwebp -q 80 input.jpg -o output.webp konvertiert ein JPG mit Qualitätsstufe 80 nach WebP. Das Gegenstück dwebp konvertiert WebP zurück.

Bildbearbeitungsprogramme: GIMP (ab Version 2.10), Photoshop (mit Plugin), Paint.NET und Affinity Photo unterstützen den WebP-Export nativ oder über Plugins.

Automatisiert mit Build-Tools: Für Webprojekte gibt es Plugins für Webpack, Vite, und andere Build-Tools, die Bilder automatisch nach WebP konvertieren.

WebP Richtig in Webseiten Einbinden

Die empfohlene Methode zur WebP-Einbindung verwendet das <picture>-Element mit Fallback:

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

Browser, die WebP unterstützen, laden die WebP-Datei. Alle anderen laden das JPG-Fallback. So erreichen Sie optimale Leistung ohne Kompatibilitätsprobleme.

CDN-Automatisierung: Viele CDNs (Cloudflare, Fastly, imgix) bieten automatische WebP-Konvertierung an. Der Server erkennt am Accept-Header des Browsers, ob WebP unterstützt wird, und liefert automatisch die passende Version aus. Das ist die bequemste Lösung für bestehende Webseiten.

CSS-Hintergrundbilder: Für CSS-Hintergrundbilder gibt es kein <picture>-Element. Hier können Sie die CSS-Feature-Erkennung mit @supports oder eine JavaScript-basierte Erkennung verwenden.

WebP vs. AVIF: Lohnt Sich der Umstieg?

AVIF ist das noch neuere Format und bietet bessere Komprimierung als WebP. Trotzdem hat WebP derzeit die Nase vorn für die meisten Anwendungsfälle:

• Reifere Unterstützung: WebP wird von 97% der Browser unterstützt, AVIF von etwa 92%. Für geschäftskritische Webseiten ist dieser Unterschied relevant.
• Schnellere Kodierung: WebP-Kodierung ist deutlich schneller als AVIF. Bei dynamischer Bildgenerierung (z.B. Thumbnail-Erstellung) ist das ein entscheidender Faktor.
• Bessere Werkzeugunterstützung: Mehr Software und Bibliotheken unterstützen WebP als AVIF.

Die pragmatische Empfehlung: Verwenden Sie WebP als Standardformat und bieten Sie AVIF als progressive Verbesserung an, wenn Ihr Workflow es erlaubt. Nutzen Sie unseren WebP-Konverter für die schnelle Formatumwandlung.