Bei Webbildern lautet die Wahl längst nicht mehr nur „JPEG für Fotos, PNG für Transparenz“. WebP ist etabliert, AVIF funktioniert in modernen Browsern breit und JPEG XL entwickelt sich technisch weiter, ist aber noch nicht universell verfügbar.
2026 lautet die sinnvollere Frage: Welches Format passt zu Zielgruppe, Produktionsworkflow und Bildinhalt?
Stand: 30. August 2026. Browser-Unterstützung verändert sich; vor langfristigen Produktionsentscheidungen erneut prüfen.
Überblick
| Format |
Kompression |
Transparenz |
Animation |
HDR |
Web-Kompatibilität |
| JPEG |
verlustbehaftet |
nein |
nein |
begrenzt im üblichen Web |
ausgezeichnet |
| PNG |
verlustfrei |
ja |
über APNG |
typischer SDR-Einsatz |
ausgezeichnet |
| WebP |
mit/ohne Verlust |
ja |
ja |
eingeschränkter als neue Formate |
sehr breit |
| AVIF |
mit/ohne Verlust |
ja |
ja |
ja |
breit in modernen Browsern |
| JPEG XL |
mit/ohne Verlust |
ja |
ja |
ja |
noch nicht universell |
WebP
Die größte Stärke ist die Reife im Web-Ökosystem. WebP eignet sich gut für Fotos, Vorschaubilder, Produktbilder, viele Screenshots und Transparenz, wenn SVG nicht passt.
AVIF
AVIF basiert auf AV1-Bildcodierung und unterstützt verlustbehaftete und verlustfreie Modi, Transparenz, Animation, hohe Bittiefe und HDR.
Bei Fotos kann es sehr kleine Dateien liefern, allerdings kann die Codierung aufwendiger sein.
JPEG XL
JPEG XL ist als ISO/IEC 18181 standardisiert und unterstützt Verlust/Verlustfrei, progressive Dekodierung, HDR, große Farbräume, Transparenz und Animation.
Das Problem 2026 ist weniger das Formatdesign als die noch unvollständige Browser-Unterstützung. Für allgemeine Webseiten sollte .jxl daher nicht die einzige Quelle sein.
JPEG bleibt relevant
JPEG besitzt außergewöhnlich breite Kompatibilität, ausgereifte Decoder und vorhersehbares Verhalten. Es bleibt ein sehr zuverlässiges Foto-Fallback.
PNG
PNG bleibt für verlustfreie Grafiken, Transparenz und bestimmte Screenshots wertvoll, kann bei Fotos aber sehr groß werden.
<picture>
<picture>
<source srcset="/bild.avif" type="image/avif">
<source srcset="/bild.webp" type="image/webp">
<img src="/bild.jpg" alt="Beschreibung">
</picture>
Fallback ist normale progressive Verbesserung.
Nicht ohne Grund alle Varianten erzeugen
JPEG + WebP + AVIF + JPEG XL erhöhen Codierzeit, Speicher, Build-Komplexität, Cache-Aufwand und Tests.
Zwei oder drei sinnvolle Varianten reichen häufig.
Qualitätswerte sind nicht direkt vergleichbar
„Qualität 80“ bedeutet in verschiedenen Encodern nicht dasselbe. Gleiche Quelle, gleiche Abmessungen, tatsächliche Darstellungsgröße und Dateigröße vergleichen.
Praxis
Für allgemeine Websites ist WebP eine reife Wahl; AVIF kann weitere Einsparungen bringen; JPEG bleibt ein robustes Fallback.
JPEG XL ist technisch interessant, sollte für allgemeine Zielgruppen 2026 aber noch mit Fallback eingesetzt werden.
Ein 6000 Pixel breites AVIF bleibt unnötig groß, wenn es nur mit 400 Pixeln angezeigt wird.
Priorität:
- passende Abmessungen;
- passendes Format;
- passende Kompression;
- responsive Varianten;
- Cache und Auslieferung.