Ratgeber · Web-Performance 2026
Bilder fürs Web optimieren: AVIF schlägt WebP schlägt JPG
AVIF spart 30-50 % gegenüber WebP und 50-80 % gegenüber JPG. Wie das picture-Element für Fallbacks aufgebaut wird.
Von Mateusz Viola
Betreiber & redaktionelle Verantwortung pagespeed-test.de
Veröffentlicht
Aktualisiert:
Format-Vergleich AVIF, WebP, JPG, PNG
Bei gleicher visueller Qualität sparen moderne Formate massiv Bytes:
| Format | Browser-Support | Größe (rel. zu JPG) | Wann nutzen |
|---|---|---|---|
| AVIF | 96 % global (Chrome, FF, Safari ab iOS 16) | ~30-50 % von JPG | Erste Wahl für Fotos |
| WebP | ~98 % global | ~60-70 % von JPG | Fallback wenn AVIF nicht geht |
| JPG | 100 % | 100 % (Baseline) | Universal-Fallback |
| PNG | 100 % | oft 2-5× JPG bei Fotos | NUR für Grafiken mit Transparenz |
| SVG | 100 % | oft < 1 KB für Icons | Icons, Logos, einfache Grafiken |
picture-Element mit AVIF-Priorität
Mit dem <picture>-Element wird der beste Format gewählt, das der Browser unterstützt:
<picture>
<source srcset="/foto.avif" type="image/avif">
<source srcset="/foto.webp" type="image/webp">
<img src="/foto.jpg" alt="..." width="1200" height="800">
</picture>Browser-Logik: erst AVIF probieren, dann WebP, dann JPG-Fallback. Auf einem aktuellen Chrome wird AVIF geladen, auf einem alten iOS Safari (vor 16) der WebP-Fallback.
Responsive Images mit srcset
Für unterschiedliche Viewport-Breiten verschiedene Bild-Größen ausliefern:
<img src="/foto-800.jpg"
srcset="/foto-400.jpg 400w,
/foto-800.jpg 800w,
/foto-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="..." width="800" height="600">Auf Mobilgeräten lädt der Browser foto-400.jpg, auf großen Screens foto-1600.jpg. Spart auf Mobile bis zu 80 % Bandbreite.
fetchpriority für das Hero-Bild
Das LCP-Bild bekommt fetchpriority="high":
<img src="/hero.avif" fetchpriority="high" alt="..." width="1200" height="600">Damit lädt es früher als andere Assets. Auf alle anderen Bilder loading="lazy" setzen, dann lädt der Browser sie erst beim Scrollen.
Tools zur Konvertierung
- sharp (Node.js) - im Build-Step JPG → AVIF/WebP konvertieren
- squoosh.app - Browser-basiert, drag&drop für einzelne Bilder
- cwebp / avifenc - CLI für Batch-Skripte
- Astro Image / Next.js Image - automatische Konvertierung im Framework
Quality-Settings
Für die meisten Foto-Webinhalte reicht Quality 70-80. Bei AVIF/WebP sieht 50 oft noch tadellos aus. Höhere Werte bringen visuell kaum mehr, kosten aber massiv Bytes. Im Zweifel: side-by-side Vergleich auf realer Anzeigegröße machen, nicht zoom-in.