Wenn du schon einmal einen Performance-Test bei Google PageSpeed Insights durchgeführt hast und die Meldung "Bilder in modernen Formaten bereitstellen" erhalten hast, war die Empfehlung, deine Bilder zu WebP zu konvertieren. Es ist das Format, das Google als modernen Standard für Bilder im Web betrachtet — und dafür gibt es gute Gründe.
Was bedeutet WebP?
WebP ist ein von Google entwickeltes und 2010 veröffentlichtes Bildformat. Der Name ist eine Kombination aus Web + P (von Picture — Bild auf Englisch). Es wurde mit einem klaren Ziel geschaffen: überlegene Komprimierung im Vergleich zu JPG und PNG zu bieten, um das Gewicht von Webseiten zu reduzieren, ohne auf visuelle Qualität zu verzichten.
Anders als JPG (das nur verlustbehaftete Komprimierung unterstützt) und PNG (das nur verlustfreie Komprimierung unterstützt), unterstützt WebP beide Komprimierungsmodi — lossy und lossless — sowie Transparenz mit Alphakanal und Animationen. Es ist in der Praxis ein einziges Format, das JPG, PNG und GIF in einer Datei ersetzt.
Wie funktioniert WebP?
WebP lossy basiert auf dem Video-Codec VP8, ebenfalls von Google entwickelt. Es nutzt eine Technik namens Blockvorhersage: Statt jeden Pixel einzeln zu speichern, sagt der Algorithmus den Wert jedes Pixelblocks basierend auf den benachbarten Blöcken voraus und speichert nur die Differenz zwischen Vorhersage und tatsächlichem Wert. Je kleiner die Differenz, desto kleiner die Datei.
WebP lossless nutzt eine Reihe eigener Techniken, einschließlich räumlicher Vorhersage, Farbtransformation und Entropiekomprimierung mit einem Algorithmus namens LZ77 + Huffman-Kodierung. Das Ergebnis ist eine verlustfreie Datei, die deutlich kleiner ist als ein gleichwertiges PNG — im Durchschnitt 26% kleiner bei gleichem Inhalt.
Ist WebP wirklich kleiner als JPG und PNG?
Ja, und der Unterschied ist erheblich. Laut Googles eigenen Daten:
| Vergleich | Durchschnittliche Größenreduzierung |
|---|---|
| WebP lossy vs. JPG (gleiche visuelle Qualität) | 25–35% kleiner |
| WebP lossless vs. PNG (gleiche Qualität) | ~26% kleiner |
| WebP mit Transparenz vs. PNG | ~22% kleiner |
In der Praxis bedeutet das, dass ein Online-Shop mit 500 Produktbildern als JPG das gesamte Bildvolumen um ein Drittel reduzieren kann, indem er einfach zu WebP konvertiert — ohne jeglichen wahrnehmbaren visuellen Verlust.
💡 Auswirkung auf SEO: Google nutzt die Ladegeschwindigkeit als Ranking-Faktor. Bilder in WebP reduzieren den LCP (Largest Contentful Paint) — eine der wichtigsten Core-Web-Vitals-Metriken — und tragen direkt zu besseren Positionen in den Suchergebnissen bei.
Was sind die Vorteile von WebP?
- Kleinere Dateien bei gleicher Qualität: sowohl im lossy- als auch im lossless-Modus übertrifft WebP JPG und PNG in der Komprimierungseffizienz.
- Transparenzunterstützung: wie PNG unterstützt WebP einen vollständigen Alphakanal mit 256 Opazitätsstufen — und mit kleinerer Datei.
- Animationsunterstützung: animiertes WebP ersetzt GIFs mit viel kleineren Dateien und überlegener Farbqualität (GIF ist auf 256 Farben begrenzt; WebP unterstützt Millionen).
- Lossy- und Lossless-Modus im selben Format: ein einziges Format für alle Anwendungsfälle — Fotos, Logos, Icons und Animationen.
- Metadatenunterstützung: WebP unterstützt EXIF- und XMP-Metadaten und bewahrt Kamera-, Standort- und Urheberrechtsinformationen.
- Native Unterstützung in allen modernen Browsern: Chrome, Firefox, Safari, Edge und Opera unterstützen WebP seit 2020.
Was sind die Einschränkungen von WebP?
- Eingeschränkte Kompatibilität außerhalb des Webs: viele ältere Bildbearbeitungsprogramme, Viewer-Anwendungen und Altsysteme erkennen das Format noch nicht nativ. Windows 10 und frühere Versionen benötigen einen zusätzlichen Codec, um WebP im Datei-Explorer zu öffnen.
- Nicht auf allen Plattformen akzeptiert: soziale Netzwerke wie WhatsApp und einige E-Mail-Marketing-Tools akzeptieren WebP noch nicht für den Upload — in diesen Fällen sind JPG oder PNG weiterhin nötig.
- Eingeschränktere Bearbeitung: wenige professionelle Softwares haben vollständige WebP-Unterstützung für die Bearbeitung. Für Bearbeitungs-Workflows ist es ideal, die Originaldateien in RAW, TIFF oder PSD zu bewahren und erst bei der finalen Version zu WebP zu exportieren.
- Keine Unterstützung in E-Mails: E-Mail-Clients wie Outlook und Apple Mail rendern WebP nicht. Nutze für Bilder in E-Mails JPG oder PNG.
WebP vs. JPG vs. PNG vs. SVG — vollständiger Vergleich
| Merkmal | WebP | JPG | PNG | SVG |
|---|---|---|---|---|
| Komprimierung | Lossy und lossless | Lossy | Lossless | Vektor |
| Transparenz | Ja | Nein | Ja | Ja |
| Animation | Ja | Nein | Nein* | Ja |
| Ideal für Fotos | Ja | Ja | Nein | Nein |
| Ideal für Logos und Icons | Ja | Nein | Ja | Ja |
| Skalierbar ohne Verlust | Nein | Nein | Nein | Ja |
| Dateigröße | Sehr klein | Klein | Mittel bis groß | Sehr klein |
| Universelle Unterstützung | Moderne Browser | Universal | Universal | Moderne Browser |
* Animiertes PNG (APNG) existiert, hat aber eingeschränkte Unterstützung.
Wann WebP verwenden?
WebP ist die beste Wahl für die überwiegende Mehrheit der Bilder, die auf modernen Websites und Webanwendungen angezeigt werden:
- Produktfotos in Online-Shops: gleiche Dateigröße wie JPG, aber mit 25–35% weniger Gewicht — schnelleres Laden ohne Qualitätsverzicht.
- Banner- und Hero-Bilder: wo das Bildgewicht direkten Einfluss auf LCP und Nutzererfahrung hat.
- Logos und Icons mit Transparenz: ersetzt PNG mit kleinerer Datei und vollständiger Alphakanal-Unterstützung.
- Bilder in Blogs und Portfolios: weniger Gewicht, gleiche visuelle Qualität, bessere PageSpeed-Leistung.
- Ersatz für animierte GIFs: animiertes WebP hat viel kleinere Dateien und deutlich bessere Farbqualität als GIF.
Vermeide WebP für per E-Mail gesendete Bilder, Uploads auf sozialen Netzwerken, die das Format nicht akzeptieren, und Arbeitsdateien, die bearbeitet werden — behalte in diesen Fällen JPG oder PNG bei.
Konvertiere jetzt deine Bilder zu WebP
Reduziere das Gewicht deiner Bilder um bis zu 35% ohne visuellen Verlust. Konvertiere JPG und PNG kostenlos zu WebP, direkt im Browser.
Zu WebP konvertierenWie nutzt man WebP mit Fallback für ältere Browser?
Obwohl alle modernen Browser WebP unterstützen, ist es eine gute Praxis, einen Fallback in JPG oder PNG anzubieten, um Kompatibilität zu gewährleisten. Im HTML geschieht das mit dem <picture>-Tag:
Mit diesem Ansatz laden Browser, die WebP unterstützen, die kleinere Datei; die anderen laden automatisch das JPG oder PNG als Alternative. Das ist die von Google empfohlene Strategie für Websites, die breite Kompatibilität benötigen.