Bildformat-Vergleich: WebP vs AVIF
Vergleichen Sie moderne Bildformate und sehen Sie, wie sich Qualitätseinstellungen auf die Dateigröße auswirken. Erfahren Sie, wann Sie WebP oder AVIF für optimale Webleistung verwenden sollten.
Durchschnittliche Reduzierung
Durchschnittliche Reduzierung
Modern browsers
Dateigrößen-Vergleich
WebP-Format
AVIF-Format
Wichtige Erkenntnisse von Chrome Performance
AVIF und WebP sind moderne Bildformate mit überlegener Komprimierung im Vergleich zu traditionellen JPEG- und PNG-Formaten.
AVIF bietet überlegene Komprimierung mit den kleinsten Dateigrößen. Unterstützt in allen modernen Browsern (Chrome 85+, Firefox 93+, Safari 16+).
WebP bietet hervorragende Komprimierung mit breiterer Browser-Unterstützung, einschließlich älterer Browser und iOS-Versionen (iOS 14+).
- 1.Komprimierungsfaktor erhöhen (Qualitätsbereich 30-70)
- 2.Moderne Formate verwenden (AVIF/WebP statt JPEG/PNG)
- 3.Responsive Größen mit srcset und picture-Elementen bereitstellen
- 4.Erwägen Sie die Verwendung eines Bild-CDN für automatische Optimierung
Wann welches Format verwenden
- ✓Sie die kleinstmögliche Dateigröße benötigen
- ✓Nur moderne Browser unterstützt werden müssen
- ✓Für Hero-Bilder und Above-the-Fold-Inhalte
- ✓Sie eine breitere Browser-Unterstützung benötigen
- ✓Balance zwischen Dateigröße und Kompatibilität wichtig ist
- ✓Ältere iOS-Geräte unterstützt werden müssen
Verwenden Sie das HTML picture-Element, um AVIF mit WebP-Fallback für maximale Kompatibilität bereitzustellen:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Fallback">
</picture>Mehr erfahren von Chrome Performance Insights