Format-Matrix 2025: AVIF vs. WebP vs. JPEG (und wann PNG oder JXL)
Leitfaden zur Formatauswahl: wahrnehmbare Qualität, Kompatibilität, Gewicht, CPU-Kosten und Fallback-Strategie im Jahr 2025.
Ziel
Eine klare Matrix bereitstellen, um das optimale Format basierend auf Inhaltstyp, CPU-Beschränkungen, Kompatibilitätsstatus und Core Web Vitals-Zielen auszuwählen.
1. Zusammenfassung
- AVIF: Beste Komprimierung für komplexe Texturen; langsamere Kodierung.
- WebP: Ausgewogene Geschwindigkeit/Qualität; fest etablierte Allgegenwart.
- JPEG (klassisch): Ultra schnelle Kodierung/Dekodierung; schwächere Effizienz bei gleicher wahrnehmbarer Qualität.
- PNG: Nur wenn verlustfreie Transparenz oder pixelgenaue Darstellung erforderlich ist.
- JXL (aufstrebend): Hohes technisches Potenzial; Unterstützung noch teilweise (Status 2025 vor endgültiger Veröffentlichung überprüfen).
2. Entscheidungsmatrix (Entwurf)
| Kriterium | AVIF | WebP | JPEG | PNG | JXL |
|---|---|---|---|---|---|
| Komprimierungseffizienz | Hoch | Mittel-Hoch | Mittel | Niedrig (verlustfrei) | Sehr Hoch* |
| Kodiergeschwindigkeit | Langsam | Mittel | Sehr schnell | N/A | Langsam* |
| Transparenz | Ja | Ja | Nein | Ja | Ja* |
| Animation | Ja (begrenzt) | Ja | Nein | Nein | Ja* |
| Browser-Unterstützung | Hoch 2025 | Sehr Hoch | Universal | Universal | Teilweise* |
| Strichzeichnungen / UI | Gut (abgestimmt) | Gut | Mäßig (Banding-Risiko) | Exzellent | Gut* |
| Komplexe Fotos | Exzellent | Sehr gut | Akzeptabel | Ineffizient | Exzellent* |
| Energieverbrauch Dekodierung | Mittel | Niedrig-Mittel | Niedrig | Niedrig | TBD* |
| (* Zum Zeitpunkt der Veröffentlichung zu überprüfen und zu aktualisieren.) |
3. Empfohlener Ablauf
- Fähigkeitserkennung (Accept-Header + Feature-Tests).
- AVIF bereitstellen, wenn unterstützt und die Reduzierung einen Schwellenwert überschreitet.
- WebP-Fallback, wenn AVIF nicht unterstützt wird.
- JPEG-Basis als letzter Ausweg für Fotografie.
- PNG nur dort, wo für Transparenz / Pixelperfektion erforderlich.
4. Praktische Heuristiken
| Fall | Erste Wahl | Anmerkungen |
|---|---|---|
| Hero-Fotografie | AVIF | Farbverlaufs-Banding prüfen |
| Thumbnail-Gitter | WebP | Qualität ~80, senkt die CPU-Last bei Massenkodierung |
| UI mit Alpha | PNG / WebP | WebP, wenn nicht pixelgenau |
| Scharfe Texterfassung | WebP (verlustfrei) | Oder AVIF mit feiner Quantisierung |
| Leichte Animationen | WebP animiert | GIF vermeiden |
5. Zu sammelnde Metriken
- Byte-Einsparungsverhältnis (JPEG → AVIF/WebP).
- VMAF p95 vs. Referenz.
- Kodierzeit p50/p95 (ms) pro Format auf realer Infrastruktur.
- Batterieauswirkung bei mobilen A/B-Tests.
6. Überlegungen zur Implementierung
- Hybride Pipeline: AVIF vorverarbeiten; WebP & JPEG-Fallback erzeugen.
- Separate Qualitätsregler (fotografisch vs. grafisch).
- Metadaten-Richtlinie (EXIF beibehalten vs. entfernen).
- AVIF mit reduziertem Aufwand erneut versuchen, wenn die CPU ausgelastet ist.
7. Risiken
| Risiko | Minderung |
|---|---|
| Langsame AVIF-Build-Kodierungen | Parallelisieren + inkrementeller Cache |
| Banding in Farbverläufen | Parameter anpassen (CQ, Subsampling) |
| Ungleichmäßige JXL-Unterstützung | Feature-Erkennung + Überspringen |
8. Launch-Checkliste
- Erstellen Sie eine Tabelle mit realen Beispielgrößen (Foto, UI, Screenshot), um Stakeholdern den Effekt zu zeigen.
- Validieren Sie die JXL-Unterstützung in Safari/Chromium (Status Q3 2025 erneut prüfen).
- Dokumentieren Sie den Codepfad für die Formatverhandlung, damit Dev/Ops-Teams ihn nachverfolgen können.
Fazit
Die Matrix ermöglicht reproduzierbare, auf Metriken basierende Entscheidungen, vermeidet subjektive Debatten und bringt Effizienz mit Benutzererfahrung in Einklang.