Was ist WebP?
WebP ist ein modernes Bildformat, das Google im Jahr 2010 entwickelt hat. Es kombiniert die Stärken von JPG und PNG: verlustbehaftete und verlustfreie Komprimierung, volle Transparenz-Unterstützung und Animation — alles in einem einzigen Format.
Das Ziel war einfach: kleinere Dateien als JPG und PNG, bei gleicher oder besserer visueller Qualität. Dieses Ziel hat WebP erreicht — in vielen Tests sind WebP-Dateien 25–35% kleiner als vergleichbare JPGs und bis zu 50% kleiner als PNGs.
Wie funktioniert WebP?
WebP basiert auf dem VP8-Videocodec und verwendet einen modernen Komprimierungsalgorithmus namens Predictive Coding. Dabei wird nicht jeder Pixel einzeln kodiert, sondern der Algorithmus sagt voraus, wie ein Pixel basierend auf seinen Nachbarn aussieht, und speichert nur die Abweichung von dieser Vorhersage.
Für verlustfreie Komprimierung nutzt WebP einen eigenen Algorithmus, der sich besonders gut für Bilder mit gleichmäßigen Flächen und scharfen Kanten eignet — also genau das, womit PNG traditionell gut zurechtkommt.
WebP vs JPG vs PNG — Der Vergleich
| Eigenschaft | WebP | JPG | PNG |
|---|---|---|---|
| Verlustbehaftet | ✅ | ✅ | ❌ |
| Verlustfrei | ✅ | ❌ | ✅ |
| Transparenz | ✅ | ❌ | ✅ |
| Animation | ✅ | ❌ | ❌ |
| Dateigröße | ⭐⭐⭐ Klein | ⭐⭐ Mittel | ⭐ Groß |
| Browser-Support | Alle modernen | Universal | Universal |
| Eingeführt | 2010 | 1992 | 1996 |
Browser-Unterstützung
WebP wird inzwischen von allen modernen Browsern unterstützt: Chrome, Firefox, Safari (seit 14, 2020), Edge und Opera. Die globale Browser-Abdeckung liegt bei über 96%.
Die einzige Ausnahme sind sehr alte Browser wie Internet Explorer (der seit 2022 nicht mehr unterstützt wird) und sehr alte Safari-Versionen auf iOS 13 oder älter. Für neue Webprojekte ist WebP also bedenkenlos einsetzbar.
📊 Praktische Auswirkung: Eine typische Produktseite mit 10 Produktbildern kann durch die Umstellung auf WebP 500 KB bis 2 MB Datenvolumen sparen — das beschleunigt den Seitenaufruf spürbar.
Wann WebP verwenden?
WebP ist ideal für:
- Alle Bilder auf modernen Webseiten — der Standard-Fall 2024
- E-Commerce-Produktbilder — kleinere Dateien = schnelleres Laden = weniger Abbrüche
- Bilder mit Transparenz — statt PNG, bei kleinerem Dateivolumen
- Animierte Grafiken — als Alternative zu GIF (drastisch kleinere Dateien)
- Fotos auf Blogs und News-Seiten — bessere Core Web Vitals
Wann doch JPG oder PNG?
Es gibt Situationen, in denen JPG oder PNG besser geeignet sind:
- E-Mail-Newsletter — viele E-Mail-Clients unterstützen kein WebP
- Downloads für Benutzer — wenn Nutzer das Bild herunterladen und weiterverarbeiten wollen, ist JPG/PNG universeller kompatibel
- Sehr alte Zielgruppen-Geräte — wenn du weißt, dass deine Nutzer alte iOS-Versionen verwenden
- Professionelle Bildbearbeitung — für die Archivierung und Weiterbearbeitung eignet sich verlustfreies PNG oder TIFF besser
WebP in Next.js / React
Next.js konvertiert Bilder automatisch in WebP (und AVIF), wenn du die eingebaute next/image-Komponente verwendest. Du musst nichts weiter tun — einfach das Originalbild in JPG oder PNG bereitstellen, Next.js übernimmt die Konvertierung zur Laufzeit und cached das Ergebnis.
WebP komprimieren
Auch WebP-Dateien lassen sich weiter komprimieren. Der Browser-Canvas ermöglicht die verlustbehaftete WebP-Komprimierung direkt im Browser — ohne Upload, ohne Server. JNRT Pixel nutzt genau diese Technik.
Fazit
WebP ist 2024 die erste Wahl für Webbilder. Kleinere Dateien, bessere Core Web Vitals, breite Browser-Unterstützung — es gibt wenig Gründe, auf JPG oder PNG zu bestehen, wenn du neue Inhalte für das Web erstellst. Nutze JNRT Pixel um deine bestehenden Bilder ins WebP-Format zu komprimieren.