Die Wahl des richtigen Bildformats kann den Unterschied zwischen einer blitzschnellen Website und einer trägen Ladezeit ausmachen. Mit WebP und AVIF stehen zwei moderne Formate zur Verfügung, die gegenüber klassischen Formaten wie JPEG und PNG bis zu 50% kleinere Dateigrößen versprechen. Doch welches Format ist besser für SEO? Und solltest du auf WebP oder AVIF setzen?
In diesem umfassenden Vergleich erfährst du alles über beide Formate, ihre Vor- und Nachteile, Browser-Kompatibilität und konkrete Empfehlungen für verschiedene Website-Typen.
WebP vs. AVIF: Welches Bildformat ist besser für SEO?
Die Bedeutung von Bildformaten für SEO (Suchmaschinenoptimierung) und Sichtbarkeit in der KI-Suche
Page Speed als Ranking-Faktor
Seit dem Page Experience Update ist die Ladegeschwindigkeit ein offizieller Google-Ranking-Faktor. Bilder machen typischerweise 50-70% der Gesamtgröße einer Webseite aus. Durch optimierte Bildformate kannst du:
- Ladezeiten reduzieren: Bis zu 50% schnellere Seiten
- Core Web Vitals verbessern: Bessere LCP-Werte (Largest Contentful Paint)
- Mobile Performance steigern: Weniger Datenverbrauch
- Bounce Rate senken: Nutzer warten nicht auf langsame Seiten
Google’s Empfehlungen + Chat GPT Lesbarkeitshilfe
Google PageSpeed Insights empfiehlt explizit moderne Bildformate und warnt bei der Verwendung veralteter Formate. Websites mit optimierten Bildern erhalten bessere Scores, was indirekt das Ranking beeinflusst.
WebP: Der etablierte Standard
Was ist WebP?
WebP wurde 2010 von Google entwickelt und ist seit Jahren der Standard für moderne Bildkompression. Das Format unterstützt sowohl verlustbehaftete als auch verlustfreie Kompression sowie Transparenz und Animationen.
Technische Eigenschaften
Kompression:
- Verlustbehaftet: 25-35% kleiner als JPEG
- Verlustfrei: 26% kleiner als PNG
- Unterstützt 24-Bit RGB und 8-Bit Alpha-Kanal
Vorteile: ✅ Hervorragende Browser-Unterstützung (98%+) ✅ Etabliert seit über 10 Jahren ✅ Breite Tool-Unterstützung ✅ Gute Balance zwischen Qualität und Dateigröße ✅ Unterstützt Transparenz und Animation ✅ Schnelle Encoding/Decoding-Geschwindigkeit
Nachteile: ❌ Kompression schlechter als AVIF ❌ Keine HDR-Unterstützung ❌ Begrenzte Farbtiefe (8-Bit)
Browser-Kompatibilität WebP
Vollständig unterstützt (Stand November 2025):
- Chrome: Seit Version 23 (2012)
- Firefox: Seit Version 65 (2019)
- Edge: Seit Version 18 (2018)
- Safari: Seit Version 14 (2020)
- Opera: Seit Version 12.1 (2012)
Mobile Browser:
Sichtbar/er werden bei Google & Social Media?
In einem kostenlosen Strategiegespräch für datenbasiertes Online-Marketing, decken wir Ihre ungenutzten Potenziale auf, überprüfen ggf. vorhandene Anzeigenkonten, schauen uns das SEO-Ranking und die Sichtbarkeit an und prüfen was zu Ihrem Budget die passende Strategie ist und welche aktiven Maßnahmen zu mehr Anfragen oder Verkäufen führen.
✅ Mehr Sichtbarkeit & Wahrnehmung durch gezielte Platzierung
✅ Mehr Besucher > Interessenten > Kunden > Umsatz
✅ Mit SEA skalierbar Zielgruppe ansprechen
✅ Mit SEO nachhaltig agieren und wachsen
🫵 Maximale Erfolge mit unserer Hybrid-Strategie
💪 Mehr als 15 Jahre Erfahrung branchenübergreifend in über 1.000+ Projekten nachweisbar!
- Chrome Android: Vollständig
- Safari iOS: Seit iOS 14 (2020)
- Samsung Internet: Vollständig
Marktabdeckung: ~98% aller Nutzer weltweit
Performance-Daten WebP
Benchmark-Vergleich bei gleicher visueller Qualität:
| Format | Dateigröße | Vergleich zu JPEG |
|---|---|---|
| JPEG | 100 KB | Baseline |
| PNG | 180 KB | +80% |
| WebP (verlustbehaftet) | 68 KB | -32% |
| WebP (verlustfrei) | 132 KB | +32% vs JPEG |
AVIF: Die Zukunft der Bildkompression
Was ist AVIF?
AVIF (AV1 Image File Format) ist das neueste Bildformat, entwickelt von der Alliance for Open Media. Es basiert auf dem AV1-Video-Codec und wurde 2019 offiziell veröffentlicht.
Technische Eigenschaften
Kompression:
- Verlustbehaftet: 50% kleiner als JPEG
- Bis zu 20-30% besser als WebP
- Unterstützt HDR und Wide Color Gamut
Vorteile: ✅ Beste Kompression aller modernen Formate ✅ HDR-Unterstützung ✅ Höhere Farbtiefe (10-Bit und 12-Bit) ✅ Bessere Detailerhaltung bei starker Kompression ✅ Unterstützt Transparenz ✅ Royalty-frei und Open Source
Nachteile: ❌ Langsamere Encoding-Geschwindigkeit ❌ Höherer CPU-Aufwand beim Dekodieren ❌ Noch nicht flächendeckende Browser-Unterstützung ❌ Weniger Tool-Support als WebP ❌ Größere Dateien bei verlustfreier Kompression
Browser-Kompatibilität AVIF
Vollständig unterstützt (Stand November 2025):
- Chrome: Seit Version 85 (2020)
- Firefox: Seit Version 93 (2021)
- Edge: Seit Version 121 (2024)
- Opera: Seit Version 71 (2020)
- Safari: Seit Version 16.1 (2022) – macOS Ventura+
Eingeschränkt/Nicht unterstützt:
- Safari iOS: Seit iOS 16 (2022)
- Ältere Browser: Kein Support
Marktabdeckung: ~88% aller Nutzer weltweit (Tendenz steigend)
Performance-Daten AVIF
Benchmark-Vergleich bei gleicher visueller Qualität:
| Format | Dateigröße | Vergleich zu JPEG |
|---|---|---|
| JPEG | 100 KB | Baseline |
| WebP | 68 KB | -32% |
| AVIF | 50 KB | -50% |
Wichtig: Bei hochauflösenden Bildern und komplexen Motiven ist der Vorteil von AVIF noch deutlicher (bis zu 60% Ersparnis).
Der direkte Vergleich: WebP vs. AVIF
Kompressionseffizienz
Test-Szenario: Produktfoto 1920x1080px, hohe Qualität
Original JPEG: 856 KB
WebP (Qualität 85): 542 KB (-37%)
AVIF (Qualität 85): 398 KB (-54%)
Gewinner: AVIF (20-30% besser als WebP)
Visuelle Qualität
Bei gleicher Dateigröße:
- WebP: Gute Qualität, leichte Artefakte bei starker Kompression
- AVIF: Bessere Detailerhaltung, weniger Blocking-Artefakte
Bei starker Kompression (unter 30% der Originalgröße):
- WebP: Deutlich sichtbare Qualitätsverluste
- AVIF: Noch akzeptable Qualität
Gewinner: AVIF
Encoding-Geschwindigkeit
Test-System: Intel i7, 1920x1080px Bild
JPEG: 0,3 Sekunden
WebP: 1,2 Sekunden
AVIF: 8,5 Sekunden
Gewinner: WebP (7x schneller als AVIF)
Decoding-Geschwindigkeit (Browser)
Desktop:
- WebP: ~50ms
- AVIF: ~120ms
Mobile (mittlere Hardware):
- WebP: ~180ms
- AVIF: ~450ms
Gewinner: WebP (2-3x schneller)
Browser-Unterstützung
WebP: 98% Marktabdeckung AVIF: 88% Marktabdeckung
Gewinner: WebP (10% mehr Nutzer erreicht)
Tool-Ökosystem
WebP:
- Adobe Photoshop: Native Unterstützung
- WordPress Plugins: 100+ Plugins
- CDNs: Alle großen Anbieter
- Bildbearbeitungs-Tools: Breite Unterstützung
AVIF:
- Adobe Photoshop: Beta-Support
- WordPress Plugins: ~20 Plugins
- CDNs: Cloudflare, Cloudinary, ImageKit
- Bildbearbeitungs-Tools: Begrenzte Unterstützung
Gewinner: WebP (deutlich mehr Tools)
SEO-Auswirkungen im Detail
Core Web Vitals
Largest Contentful Paint (LCP):
- WebP kann LCP um 15-25% verbessern
- AVIF kann LCP um 25-40% verbessern
Cumulative Layout Shift (CLS):
- Beide Formate beeinflussen CLS nicht direkt
- Schnellere Ladezeiten reduzieren Layout-Shifts indirekt
First Input Delay (FID) / Interaction to Next Paint (INP):
- WebP: Minimale CPU-Last
- AVIF: Höhere CPU-Last kann INP leicht verschlechtern
PageSpeed Insights Score
Typische Verbesserung durch moderne Formate:
Vorher (JPEG/PNG):
- Mobile: 45-55 Punkte
- Desktop: 75-85 Punkte
Nachher (WebP):
- Mobile: 65-75 Punkte (+20)
- Desktop: 90-95 Punkte (+10)
Nachher (AVIF):
- Mobile: 70-80 Punkte (+25)
- Desktop: 92-98 Punkte (+12)
Mobile-First Indexing
Google crawlt primär mit mobilen Bots. Bei mobilen Verbindungen sind kleinere Dateien noch wichtiger:
3G-Verbindung (1,5 Mbps):
- 100 KB JPEG: ~0,5 Sekunden
- 68 KB WebP: ~0,36 Sekunden (-28%)
- 50 KB AVIF: ~0,27 Sekunden (-46%)
Bildsuche-Ranking
Google bevorzugt Websites mit:
- Schnellen Ladezeiten ✅
- Modernen Bildformaten ✅
- Guter mobiler Performance ✅
Beide Formate erfüllen diese Kriterien, AVIF hat einen leichten Vorteil durch kleinere Dateien.
Praxis-Szenarien: Wann welches Format?
E-Commerce / WooCommerce Shops
Empfehlung: WebP mit AVIF-Fallback
Gründe:
- Produktbilder werden häufig aktualisiert (schnelles Encoding wichtig)
- Mobile Nutzer dominieren (kleinere Dateien wichtig)
- Breite Browser-Kompatibilität nötig
- Hohe Bildanzahl pro Seite (CPU-Last beachten)
Implementierung:
<picture>
<source srcset="produkt.avif" type="image/avif">
<source srcset="produkt.webp" type="image/webp">
<img src="produkt.jpg" alt="Produktname">
</picture>
Blog / Content-Websites
Empfehlung: WebP (mit optionalem AVIF für Hero-Images)
Gründe:
- Viele Bilder pro Artikel
- SEO-Traffic dominiert (PageSpeed wichtig)
- Einfache Integration mit WordPress
- Niedrige Server-Last beim Konvertieren
WordPress-Plugins:
- ShortPixel (WebP + AVIF)
- Imagify (WebP + AVIF)
- EWWW Image Optimizer (WebP + AVIF)
Portfolio / Fotografie
Empfehlung: AVIF mit WebP-Fallback
Gründe:
- Bildqualität hat höchste Priorität
- Weniger Bilder, aber hochauflösend
- Zielgruppe nutzt moderne Browser
- Showcase-Charakter
Corporate Websites
Empfehlung: WebP
Gründe:
- Maximale Kompatibilität (auch mit älteren Firmen-PCs)
- Einfache Implementierung
- Stabile Performance
- IT-Abteilungen bevorzugen etablierte Standards
Landing Pages / Performance-Marketing
Empfehlung: AVIF mit WebP-Fallback
Gründe:
- Conversion-Rate hängt stark von Geschwindigkeit ab
- Meist nur wenige, aber wichtige Bilder
- Jede Millisekunde zählt
- Modernes Image wichtig
News-Portale / Magazin-Seiten
Empfehlung: WebP mit CDN-Optimierung
Gründe:
- Hunderte Bilder täglich hochgeladen
- Schnelles Encoding essentiell
- Traffic-Spitzen erfordern niedrige Server-Last
- Breaking News müssen sofort online sein
Implementierung: So stellst du auf moderne Formate um
Variante 1: WordPress-Plugins (einfachste Lösung)
Empfohlene Plugins:
1. ShortPixel (Empfehlung)
- WebP + AVIF Support
- Automatische Konvertierung
- Bulk-Optimierung
- CDN-Integration
- Ab 9,99€/Monat
2. Imagify
- WebP + AVIF
- 3 Qualitätsstufen
- Backup-Funktion
- Ab 9,99€/Monat
3. EWWW Image Optimizer
- Kostenlose Basisversion
- WebP + AVIF (Premium)
- Lokal oder Cloud
- Premium ab 7€/Monat
Anleitung ShortPixel:
1. Plugin installieren & aktivieren
2. Settings → ShortPixel
3. "Create WebP versions" aktivieren
4. "Create AVIF versions" aktivieren (optional)
5. "Deliver next-gen versions via .htaccess" aktivieren
6. Bulk-Optimierung starten
Variante 2: .htaccess-Methode (fortgeschritten)
Automatische Auslieferung basierend auf Browser-Support:
<IfModule mod_rewrite.c>
RewriteEngine On
# AVIF Support prüfen
RewriteCond %{HTTP_ACCEPT} image/avif
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.avif -f
RewriteRule ^ %{REQUEST_FILENAME}.avif [T=image/avif,E=accept:1,L]
# WebP Support prüfen (Fallback)
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule ^ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
# Korrekte MIME-Types setzen
<IfModule mod_mime.c>
AddType image/webp .webp
AddType image/avif .avif
</IfModule>
Variante 3: Picture-Element (maximale Kontrolle)
Manuelles HTML:
<picture>
<source
srcset="bild-320.avif 320w, bild-640.avif 640w, bild-1024.avif 1024w"
type="image/avif"
sizes="(max-width: 640px) 100vw, 640px">
<source
srcset="bild-320.webp 320w, bild-640.webp 640w, bild-1024.webp 1024w"
type="image/webp"
sizes="(max-width: 640px) 100vw, 640px">
<img
srcset="bild-320.jpg 320w, bild-640.jpg 640w, bild-1024.jpg 1024w"
sizes="(max-width: 640px) 100vw, 640px"
src="bild-640.jpg"
alt="Bildbeschreibung"
width="640"
height="480"
loading="lazy">
</picture>
Vorteile:
- Volle Kontrolle über Breakpoints
- Art Direction möglich
- Optimal für Performance
Nachteile:
- Aufwendige manuelle Pflege
- Mehr Code pro Bild
Variante 4: CDN mit automatischer Konvertierung
Cloudflare Polish:
1. Cloudflare aktivieren
2. Speed → Optimization
3. "Polish" auf "Lossless" oder "Lossy"
4. "WebP" aktivieren
5. Automatische Auslieferung
Cloudinary:
<img src="https://res.cloudinary.com/demo/image/upload/f_auto,q_auto/sample.jpg">
f_auto wählt automatisch AVIF, WebP oder JPEG
ImageKit:
<img src="https://ik.imagekit.io/demo/sample.jpg?tr=f-auto,q-auto">
Variante 5: PHP-Konvertierung (für Entwickler)
WebP-Konvertierung:
function convert_to_webp( $source, $destination, $quality = 85 ) {
$info = getimagesize( $source );
if ( $info['mime'] == 'image/jpeg' ) {
$image = imagecreatefromjpeg( $source );
} elseif ( $info['mime'] == 'image/png' ) {
$image = imagecreatefrompng( $source );
} else {
return false;
}
imagewebp( $image, $destination, $quality );
imagedestroy( $image );
return true;
}
AVIF-Konvertierung (erfordert ImageMagick):
function convert_to_avif( $source, $destination, $quality = 85 ) {
$imagick = new Imagick( $source );
$imagick->setImageFormat( 'avif' );
$imagick->setImageCompressionQuality( $quality );
$imagick->writeImage( $destination );
$imagick->clear();
$imagick->destroy();
return true;
}
Performance-Optimierung: Best Practices
1. Responsive Images mit srcset
Generiere mehrere Größen für verschiedene Viewports:
<picture>
<source
media="(max-width: 640px)"
srcset="mobile-small.avif 320w, mobile.avif 640w"
type="image/avif">
<source
media="(max-width: 640px)"
srcset="mobile-small.webp 320w, mobile.webp 640w"
type="image/webp">
<source
srcset="desktop.avif 1024w, desktop-large.avif 1920w"
type="image/avif">
<source
srcset="desktop.webp 1024w, desktop-large.webp 1920w"
type="image/webp">
<img
srcset="mobile.jpg 640w, desktop.jpg 1024w"
src="desktop.jpg"
alt="Responsive Bild">
</picture>
2. Lazy Loading aktivieren
<img src="bild.webp" alt="Beschreibung" loading="lazy">
Für WordPress (automatisch in Gutenberg):
add_filter( 'wp_lazy_loading_enabled', '__return_true' );
3. Kritische Bilder priorisieren
<!-- Hero-Image: Nicht lazy, high priority -->
<img src="hero.avif" alt="Hero" fetchpriority="high" loading="eager">
<!-- Below-the-fold: Lazy laden -->
<img src="content.webp" alt="Content" loading="lazy">
4. Dimensions angeben (CLS vermeiden)
<img src="bild.webp" alt="Beschreibung" width="800" height="600">
WordPress macht das automatisch, wenn in der Mediathek hochgeladen.
5. Qualitätseinstellungen optimieren
WebP:
- Fotos: 80-85 Qualität
- Screenshots/Grafiken: 90-95 Qualität
- Thumbnails: 75-80 Qualität
AVIF:
- Fotos: 65-75 Qualität (entspricht WebP 80-85)
- Screenshots/Grafiken: 80-90 Qualität
- Thumbnails: 60-70 Qualität
6. Caching konfigurieren
.htaccess:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/webp "access plus 1 year"
ExpiresByType image/avif "access plus 1 year"
</IfModule>
Nginx:
location ~* \.(webp|avif)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
Häufige Probleme und Lösungen
Problem 1: AVIF-Bilder werden nicht angezeigt
Ursache: Server sendet falschen MIME-Type
Lösung (.htaccess):
<IfModule mod_mime.c>
AddType image/avif .avif
AddType image/avif-sequence .avifs
</IfModule>
Problem 2: Bilder sehen verschwommen aus
Ursache: Zu aggressive Kompression
Lösung: Qualität erhöhen
- WebP: Von 75 auf 85
- AVIF: Von 60 auf 70
Problem 3: Lange Konvertierungszeiten
Ursache: AVIF-Encoding ist ressourcenintensiv
Lösung:
- WebP für Bulk-Content
- AVIF nur für wichtige Bilder
- CDN mit automatischer Konvertierung nutzen
- Konvertierung asynchron im Hintergrund
Problem 4: Alte Browser zeigen keine Bilder
Ursache: Fehlende Fallback-Bilder
Lösung: Immer JPEG/PNG als Fallback:
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Fallback">
</picture>
Problem 5: Google indexiert falsche Bildversion
Ursache: Fehlende Vary-Header
Lösung:
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
Problem 6: Hohe Server-Last
Ursache: On-the-fly Konvertierung überlastet CPU
Lösung:
- Bilder beim Upload konvertieren
- Caching aktivieren
- CDN verwenden
- Conversion-Queue implementieren
Kosten-Nutzen-Analyse
WordPress-Plugin-Kosten (jährlich)
ShortPixel:
- Starter: 119€/Jahr (10.000 Bilder/Monat)
- Business: 239€/Jahr (30.000 Bilder/Monat)
Imagify:
- Infinite: 119€/Jahr (Unlimited)
EWWW Premium:
- Executive: 84€/Jahr (Unlimited)
Eigenentwicklung
Entwicklungsaufwand:
- Grundimplementierung: 8-16 Stunden
- Testing & Optimierung: 4-8 Stunden
- Gesamt: 500-1.200€ (bei 50€/Stunde)
Laufende Kosten:
- Server-Ressourcen: +10-20% CPU
- Storage: +30-50% (3 Formate)
ROI-Beispiel E-Commerce
Ausgangssituation:
- 1.000 Besucher/Tag
- Conversion-Rate: 2%
- Durchschnitt: 50€ Warenkorbwert
- Absprungrate: 45%
Nach WebP-Umstellung:
- PageSpeed: +20 Punkte
- Ladezeit: -1,5 Sekunden
- Absprungrate: -10% (auf 35%)
- Conversion-Rate: +0,4% (auf 2,4%)
Rechnung:
Vorher: 1.000 × 0,55 × 0,02 × 50€ = 550€/Tag
Nachher: 1.000 × 0,65 × 0,024 × 50€ = 780€/Tag
Mehreinnahmen: 230€/Tag = 6.900€/Monat
Plugin-Kosten: 119€/Jahr = 10€/Monat
ROI: 690:1 (69.000%)
ROI-Beispiel Blog
Ausgangssituation:
- 10.000 Besucher/Monat
- Werbeeinnahmen: 5€ RPM (Revenue per Mille)
- Bounce-Rate: 65%
Nach AVIF-Umstellung:
- PageSpeed: +25 Punkte
- Bounce-Rate: -15% (auf 50%)
- Seitenaufrufe/Besuch: +25%
Rechnung:
Vorher: 10.000 × 0,35 × 1,5 × 5€/1000 = 26,25€/Monat
Nachher: 10.000 × 0,50 × 1,875 × 5€/1000 = 46,88€/Monat
Mehreinnahmen: 20,63€/Monat
Plugin-Kosten: 10€/Monat
Break-Even: Sofort
Profit: +10,63€/Monat
Testing und Monitoring
Vor der Umstellung testen
1. Baseline erstellen:
- PageSpeed Insights: Desktop & Mobile Score notieren
- Google Analytics: Ladezeiten dokumentieren
- Core Web Vitals: LCP, CLS, INP erfassen
2. A/B-Test durchführen:
- 50% Nutzer WebP/AVIF
- 50% Nutzer JPEG/PNG
- Metriken vergleichen
Tools:
- Google Optimize (kostenlos)
- VWO (ab 199$/Monat)
- Optimizely (Enterprise)
Nach der Umstellung überwachen
Google Search Console:
- Core Web Vitals → Verbesserung prüfen
- Page Experience → Score verfolgen
- Mobile Usability → Probleme identifizieren
PageSpeed Insights:
- Wöchentlich wichtigste Seiten testen
- Score-Entwicklung tracken
Analytics:
- Durchschnittliche Ladezeit
- Bounce-Rate
- Pages per Session
- Conversion-Rate
Testing-Checklist
✅ Browser-Kompatibilität:
- Chrome, Firefox, Safari, Edge getestet
- iOS Safari, Chrome Android getestet
- Fallback funktioniert in alten Browsern
✅ Performance:
- PageSpeed Score verbessert
- LCP reduziert
- Dateigröße verkleinert
✅ Funktionalität:
- Bilder werden korrekt angezeigt
- Lazy Loading funktioniert
- Lightbox/Galleries kompatibel
✅ SEO:
- Bilder in Google-Bildersuche indexiert
- Structured Data validiert
- XML-Sitemap aktualisiert
Zukunftsausblick: JPEG XL und andere Formate
JPEG XL: Der nächste Schritt?
Eigenschaften:
- Noch bessere Kompression als AVIF
- Schnelleres Encoding
- Progressive Decoding
- Verlustfreie Konvertierung von JPEG
Status (2025):
- Chrome: Experimentell
- Firefox: Hinter Flag
- Safari: Kein Support
- Empfehlung: Noch abwarten
WebP 2
Google arbeitet an einem WebP-Nachfolger mit:
- 30% besserer Kompression
- Moderneren Algorithmen
- HDR-Support
Status: Frühe Entwicklungsphase
Empfehlung für die Zukunft
2025-2026:
- WebP als Standard
- AVIF für Premium-Content
- JPEG als Fallback
2027+:
- AVIF als neuer Standard
- JPEG XL für spezielle Anwendungen
- WebP als Legacy-Fallback
Praxis-Checkliste: Deine Schritt-für-Schritt-Anleitung
Phase 1: Analyse (Tag 1)
- [ ] Aktuelle Bildformate dokumentieren
- [ ] PageSpeed Insights Baseline erstellen
- [ ] Gesamtgröße aller Bilder ermitteln
- [ ] Wichtigste Seiten identifizieren
Phase 2: Strategie (Tag 1-2)
- [ ] Format wählen (WebP, AVIF oder beide)
- [ ] Plugin oder Custom-Lösung entscheiden
- [ ] Budget festlegen
- [ ] Rollout-Plan erstellen
Phase 3: Testing (Tag 3-5)
- [ ] Test-Installation aufsetzen
- [ ] Konvertierung an 10 Beispielbildern testen
- [ ] Browser-Kompatibilität prüfen
- [ ] Performance messen
Phase 4: Implementierung (Tag 6-10)
- [ ] Plugin installieren oder Code implementieren
- [ ] Bestehende Bilder konvertieren (Bulk)
- [ ] Automatische Konvertierung für neue Uploads aktivieren
- [ ] Caching konfigurieren
Phase 5: Monitoring (Woche 2-4)
- [ ] Täglich PageSpeed prüfen (erste Woche)
- [ ] Wöchentlich Core Web Vitals checken
- [ ] Conversion-Rate überwachen
- [ ] Nutzer-Feedback einholen
Phase 6: Optimierung (Ab Woche 4)
- [ ] Qualitätseinstellungen anpassen
- [ ] Responsive Images implementieren
- [ ] Kritische Bilder priorisieren
- [ ] Dokumentation erstellen
Fazit und Empfehlung
Die klare Antwort: Es kommt darauf an
Wähle WebP wenn: ✅ Du maximale Kompatibilität brauchst ✅ Schnelles Encoding wichtig ist (viele tägliche Uploads) ✅ Du einen etablierten, stabilen Standard willst ✅ Dein Hosting begrenzte CPU-Ressourcen hat ✅ Du viele ältere Nutzer hast (B2B, Corporate)
Wähle AVIF wenn: ✅ Performance absolute Priorität hat ✅ Du hochauflösende Bilder nutzt ✅ Deine Zielgruppe moderne Browser verwendet ✅ Weniger, aber qualitativ hochwertige Bilder ✅ Du bereit bist, mehr Server-Ressourcen zu investieren
Die optimale Hybrid-Lösung für 2025:
<picture>
<source srcset="bild.avif" type="image/avif">
<source srcset="bild.webp" type="image/webp">
<img src="bild.jpg" alt="Optimales Bild" loading="lazy">
</picture>
Warum?
- AVIF-Nutzer (88%) bekommen beste Qualität
- WebP-Nutzer (98%) bekommen gute Qualität
- Alle anderen (2%) bekommen JPEG-Fallback
- Du bist zukunftssicher
Quick-Wins: Sofort umsetzbar
- Plugin installieren (30 Minuten)
- ShortPixel, Imagify oder EWWW
- WebP + AVIF aktivieren
- Bulk-Optimierung starten
- Lazy Loading aktivieren (5 Minuten)
- In WordPress bereits integriert
- Oder
loading="lazy"bei img-Tags
- CDN nutzen (1 Stunde)
- Cloudflare kostenlos
- Automatic Format-Conversion aktivieren
- Responsive Images (2 Stunden)
- WordPress generiert automatisch
- Prüfen, ob Theme srcset nutzt
Was du NICHT tun solltest
❌ Beide Formate ohne Fallback ausliefern ❌ Qualität unter 60 (AVIF) / 75 (WebP) setzen ❌ Alle Bilder manuell konvertieren ❌ Auf JPEG XL warten (noch zu früh) ❌ Bilder ohne Testing umstellen
Zusammenfassung: Die wichtigsten Punkte
WebP:
- 98% Browser-Support
- 30% kleinere Dateien als JPEG
- Schnelles Encoding
- Etablierter Standard
- Perfekt für: E-Commerce, Blogs, Corporate
AVIF:
- 88% Browser-Support
- 50% kleinere Dateien als JPEG
- Beste Bildqualität
- HDR-Unterstützung
- Perfekt für: Portfolios, Landing Pages, Premium-Content
Hybrid-Ansatz:
- Beste Performance für alle Nutzer
- Zukunftssicher
- Minimaler Mehraufwand mit modernen Tools
- Empfohlen für: Die meisten Websites
SEO-Impact:
- WebP: +15-25% PageSpeed-Verbesserung
- AVIF: +25-40% PageSpeed-Verbesserung
- Beide: Bessere Core Web Vitals
- Beide: Höheres Ranking-Potenzial
Nächste Schritte
Bereit für die Umstellung? Hier sind deine nächsten Aktionen:
- Heute: PageSpeed Insights Baseline erstellen
- Diese Woche: Testing mit Plugin auf Staging-Site
- Nächste Woche: Rollout auf Live-Site
- Danach: Monitoring und Optimierung
Du brauchst Unterstützung bei der Implementierung oder hast spezifische Fragen zu deiner Website? Kontaktiere mich gerne!
Florian Ibe
CEO & Marketingberater
Ihr Ansprechpartner: Florian Ibe
Über den Autor
Florian von VASTCOB ist WordPress-Entwickler und WooCommerce-Spezialist mit Fokus auf technisches SEO und Performance-Optimierung. Mit über 10 Jahren Erfahrung hilft er E-Commerce-Unternehmen, ihre Websites schneller und erfolgreicher zu machen.
Quellen und weitere Informationen:
- Google Web Fundamentals: Image Optimization
- Can I Use: WebP / AVIF Browser Support
- Cloudinary: State of Visual Media Report 2025
- Alliance for Open Media: AVIF Specifications
