WebP-Format

Definition: WebP ist ein von Google entwickeltes, 2010 veröffentlichtes Bildformat für das Web, das sowohl verlustbehaftete als auch verlustfreie Komprimierung, Transparenz (Alpha-Kanal) und Animationen in einer einzigen Datei unterstützt. Bei gleicher visueller Qualität erreicht WebP etwa 25–35 % kleinere Dateigrößen als JPEG und 26 % kleinere Dateien als PNG. WebP basiert auf dem VP8-Videocodec (verlustbehaftet) und dem RIFF-Container (verlustfrei). Alle modernen Browser (Chrome, Firefox, Safari ab 14, Edge) unterstützen WebP vollständig – Internet Explorer und sehr alte Mobilbrowser nicht. Als noch modernere Alternative existiert AVIF (AV1-basiert), das noch besser komprimiert (~50 % vs. JPEG), aber erst ab 2023/2024 breite Browser-Unterstützung erreichte. Für Marketing-Teams relevant: WebP als Standard-Format reduziert Ladezeiten, verbessert Core Web Vitals (LCP) und spart Bandbreite.

Erläuterung

WebP ist das «sichere» moderne Bildformat: vollständige Browser-Unterstützung seit Safari 14 (2020), deutliche Komprimierungsvorteile gegenüber JPEG/PNG, und alle gängigen Bildbearbeitungs- und CMS-Tools unterstützen es nativ. AVIF ist komprimierungsstärker, hat aber noch vereinzelte Kompatibilitätslücken und langsame Encoding-Zeiten. Die Empfehlung für 2024: WebP als Standard, AVIF mit WebP-Fallback für maximale Performance, JPEG als letzter Fallback für ältere Browser via picture-Element.

Technische Eigenschaften

Verlustbehaftete Komprimierung: Basiert auf VP8-Prädiktions-Codec; Qualitätsparameter 0–100 (Standard: 75–85); bei Qualität 80: ~30 % kleiner als JPEG bei ähnlicher visueller Qualität; Blockierungsartefakte weniger ausgeprägt als JPEG bei gleicher Dateigröße; geeignet für Fotos, Hero-Images, Produktfotos
Verlustfreie Komprimierung: Pixel-perfekte Rekonstruktion; ~26 % kleiner als PNG; geeignet für Screenshots, Logos mit weichen Verläufen, UI-Elemente; Encoding langsamer als verlustbehaftete Variante; für Logos und Icons: SVG bevorzugen (skaliert verlustfrei, oft noch kleiner)
Transparenz (Alpha-Kanal): WebP unterstützt 8-Bit-Transparenz wie PNG; verlustbehaftetes WebP mit Transparenz: oft kleiner als PNG; animated WebP: ersetzt animiertes GIF (deutlich kleinere Dateien, bessere Qualität); GIF-Alternative: animated WebP oder MP4-Video für sehr lange Animationen
Encoding-Qualität und Metadaten: cwebp-Tool (Google): cwebp -q 80 input.jpg -o output.webp; -lossless für verlustfreie Komprimierung; EXIF-Metadaten standardmäßig entfernt (kleinere Dateien); -metadata all für Metadaten-Erhalt; Qualität 75–85: guter Kompromiss für Web-Fotos

Browser-Unterstützung und Fallback

picture-Element: <picture><source srcset="bild.webp" type="image/webp"><img src="bild.jpg" alt="Beschreibung"></picture>; Browser wählt erste unterstützte source; img als Fallback für ältere Browser; type-Attribut: Browser-Feature-Detection ohne JavaScript; Standard-Pattern für WebP-Rollout
AVIF als modernere Alternative: <picture><source srcset="bild.avif" type="image/avif"><source srcset="bild.webp" type="image/webp"><img src="bild.jpg" alt="..."></picture>; AVIF: ~50 % kleiner als JPEG; Browser-Support 2024: Chrome 85+, Firefox 93+, Safari 16+; Encoding langsam (CDN-Konvertierung empfohlen); ideal für Fotos, weniger für scharfkantige Grafiken
HTTP Accept-Header-Basierter Delivery: CDNs wie Cloudflare, Cloudinary, Fastly: automatische WebP-Auslieferung bei Accept: image/webp im Request-Header; Serverseitige Erkennung: $http_accept ~* "webp" in Nginx; kein Änderungs-Aufwand im Frontend nötig; Cloudinary: f_auto liefert WebP/AVIF automatisch aus

Konvertierung und Workflow

Kommandozeilen-Tools: cwebp (Google): cwebp -q 80 foto.jpg -o foto.webp; ffmpeg: ffmpeg -i input.jpg output.webp; ImageMagick: convert input.jpg -quality 80 output.webp; Batch-Konvertierung: for f in *.jpg; do cwebp -q 80 "$f" -o "${f%.jpg}.webp"; done
Build-Tools und CI/CD: imagemin-webp (Node.js): automatische WebP-Konvertierung im Build-Prozess; vite-imagetools: WebP-Generierung bei Import; Next.js Image-Komponente: automatische WebP/AVIF-Auslieferung; Gatsby: gatsby-plugin-sharp generiert WebP automatisch; Sharp (Node.js-Library): hochperformante Bildkonvertierung
CMS-Integration: WordPress: Bilder werden ab WordPress 5.8 nativ in WebP hochgeladen/konvertiert; ShortPixel, Imagify, Smush: WordPress-Plugins für automatische WebP-Konvertierung bestehender Bilder; Shopify: automatische WebP-Auslieferung für alle Produktbilder; Contentful, Cloudinary: CDN-seitige Format-Konvertierung
Qualitätsstufen für verschiedene Use Cases: Hero-Images (großes Foto): Qualität 75–80; Produktfotos (E-Commerce): Qualität 80–85 (Details wichtig); Thumbnails: Qualität 70–75; Verlustfrei für UI-Screenshots und Icons; Lazy-Loading-Thumbnails: aggressive Komprimierung (60–70) da temporär sichtbar

Performance-Impact und Core Web Vitals

LCP-Optimierung: Largest Contentful Paint oft durch Hero-Image bestimmt; WebP-Konvertierung des LCP-Images: direkte LCP-Verbesserung; Kombination mit fetchpriority="high" und preload: maximale LCP-Optimierung; 30 % kleinere Datei = ~30 % schnellere LCP bei gleicher Bandbreite; PageSpeed Insights: «Next-gen formats»-Empfehlung bei fehlender WebP-Nutzung
Bandbreite und Mobile: Mobile-Nutzer mit schlechter Verbindung (3G/4G): WebP-Einsparungen besonders spürbar; Google PageSpeed Insights: gibt potenzielle Einsparungen pro Bild an; Lighthouse-Audit «Serve images in next-gen formats»: zeigt Einsparungspotenzial; typische Ergebnisse: 50–200 KB gespart pro Produktseite bei konsequentem WebP-Einsatz

Praxistipp: Der schnellste Weg zu WebP: Aktivieren Sie automatische WebP-Konvertierung auf Ihrem CDN (Cloudflare: Speed → Optimization → «WebP»; Cloudinary: f_auto in der URL; imgix: auto=format). Das konvertiert alle ausgelieferten Bilder ohne Änderungen an CMS oder Code. Für WordPress: ShortPixel oder Imagify Plugin – Bulk-Konvertierung bestehender Bilder in wenigen Minuten. Überprüfen Sie den Erfolg mit Chrome DevTools Network-Tab: Spalte «Type» zeigt webp für korrekt ausgelieferte Bilder. Für neue Projekte: Next.js Image-Komponente (<Image> statt <img>) liefert automatisch WebP/AVIF und implementiert Lazy Loading und korrekte Größenangaben für CLS-Vermeidung – damit erledigen sich WebP und mehrere weitere Bildoptimierungen gleichzeitig.