AVIF gegen JPEG XL: Das Duell der Bildformate

Bilder machen Webseiten langsam. Punkt. Ein 100KB schwereres Bild fällt kaum auf – aber wenn tausende Besucher täglich auf deine Seite kommen, summiert sich das schnell zu einem echten Performance-Problem.

Als JPEG XL dann endlich breite Browser-Unterstützung bekam, war die Begeisterung in der Entwickler-Community entsprechend groß. Endlich ein modernes Format mit besserer Kompression! Doch wie so oft liegt die Wahrheit irgendwo zwischen Marketing-Versprechen und Realität.

Nach stundenlangem Testen und Benchmarking habe ich mir die neuesten Vergleiche zwischen AVIF und JPEG XL genauer angeschaut. Hier erfährst du, was die Daten wirklich aussagen – und was das für dein nächstes Projekt bedeutet.

Das Wichtigste zuerst

Wenn es um Dateigröße bei Web-qualität geht, hat AVIF durchgehend die Nase vorn. Bei normalen Qualitätseinstellungen sind JPEG XL-Dateien 15 bis 25 Prozent größer als vergleichbare AVIF-Encodes. Dreht man beide Encoder auf Maximum, schrumpft der Abstand auf 6 bis 20 Prozent – aber AVIF gewinnt trotzdem in fast allen Fällen.

Dabei gilt: Der gewählte Encoder macht einen riesigen Unterschied. Nicht jeder JPEG XL-Encoder ist gleich. Der neuere jixel-Encoder liefert normalerweise kleinere Dateien als libjxl, die klassische Referenzimplementierung. Dieser Vorsprung verschwindet allerdings – und kehrt sich sogar um – bei Bildern mit Transparenz.

Screenshots und Illustrationen: AVIF dominiert

Hier wird der Unterschied richtig deutlich. Für Screenshots, UI-Mockups und vektorbasierte Illustrationen schlägt AVIF JPEG XL mit Margen, die dich zweimal nachdenken lassen sollten, bevor du einfach zum neueren Format greifst.

Bei Standardeinstellungen sind vergleichbare JPEG XL-Dateien 30 bis 90 Prozent größer. Selbst bei maximaler Kompression liegt JPEG XL noch 20 bis 70 Prozent darüber. Viele Entwickler glauben, sie bräuchten verlustfreie Formate für solche Inhalte – aber lossy AVIF macht bei Screenshots einen erstaunlich guten Job. Die visuelle Qualität bei vernünftigen Kompressionseinstellungen ist ausgezeichnet.

Wenn deine Anwendung Dashboard-Screenshots, Dokumentation oder Design-Vorschauen enthält, sollte AVIF deine Standardwahl sein.

Transparenz: Kein einfaches Thema

Transparenz-Unterstützung unterscheidet sich deutlich zwischen den Formaten und Encodern. AVIF kommt mit Transparenz bei verlustbehafteter Kompression zurecht und hält dabei vernünftige Dateigrößen. JPEG XLs libjxl-Encoder erzeugt dagegen 31 bis 44 Prozent größere Dateien bei Standardeinstellungen – und bei maximaler Kompression sogar 61 bis 70 Prozent größere.

jixel geht Transparenz anders an: Er kodiert Alphakanäle standardmäßig verlustfrei. Das klingt nach einem Qualitätsvorteil, führt aber dazu, dass die Dateien zwei- bis dreimal so groß werden wie vergleichbare AVIF-Dateien. Manchmal ist verlustfrei eben nicht die richtige Antwort.

Encoding-Geschwindigkeit und Speicherverbrauch

Performance ist wichtig, wenn du während deines Build-Prozesses hunderte oder tausende Bilder verarbeitest. AVIF kodiert generell schneller und verbraucht weniger Speicher – das bedeutet schnellere CI/CD-Builds und niedrigere Compute-Kosten.

jixel überrascht hier mit tatsächlich schnellerem Encoding und geringerem Speicherverbrauch als AVIF. Aber denk daran: Diese schnelleren Encodes produzieren typischerweise größere Dateien. Die Geschwindigkeitsgewinne gehen durch die Kompressionsverluste verloren. Wenn man die insgesamt ausgelieferten Bytes betrachtet, bleibt AVIF die bessere Wahl.

Decoding-Performance: Wo es wirklich zählt

Niemand interessiert sich dafür, wie schnell dein Build-Pipeline läuft – Besucher wollen schnelle Ladezeiten. Die Dekodiergeschwindigkeit beeinflusst die Time to Interactive, und hier holt AVIF einen weiteren Punkt. JPEG XL braucht bei mittleren Qualitätseinstellungen typischerweise zwei- bis dreimal so lange zum Dekodieren.

Interessanterweise wird der Unterschied bei sehr hohen Qualitätsstufen kleiner, wo Chrome JPEG XL manchmal sogar schneller dekodiert. Aber für typische Web-Qualität bleibt AVIF deutlich flotter – und das bedeutet schnellere Seiten für deine Besucher.

Die Effort-Einstellungen

Nicht alle Qualitäts-Voreinstellungen sind gleich. Höhere Effort-Werte – also langsameres Encoding mit mehr Kompressionsversuchen – lohnen sich bei AVIF und jixel. Die Ergebnisse sind spürbar besser. Bei libjxl sieht die Sache anders aus.

libjxl im Maximal-Modus ist dramatisch langsamer und verbraucht wesentlich mehr Speicher – liefert aber manchmal sogar größere Dateien als Standardeinstellungen. Wenn du libjxl nutzt, bleib bei den Defaults. Für bessere JPEG XL-Kompression nimm lieber jixel.

HDR: Eine aufkommende Überlegung

High-Dynamic-Range-Inhalte stellen andere Anforderungen. JPEG XLs Gain-Map-Support – die Technologie, die HDR neben Standard-Displays ermöglicht – wird von Browser-Decodern noch nicht unterstützt. Die Encoding-Tools sind noch experimentell.

AVIF ist bei HDR weiter, auch wenn kein Format eine perfekte Lösung für HDR-Inhalte bietet, die graceful auf Standard-Displays herunterstufen. HDR im Web bleibt vorerst ein spezialisierter Anwendungsfall mit sorgfältiger Implementierung.

Der JPEG-Kompatibilitätsvorteil

JPEG XL bietet etwas Einzigartiges: Abwärtskompatibilität mit bestehenden JPEG-Dateien. Du kannst Legacy-JPEGs nach JPEG XL konvertieren und erreichst dabei 9 bis 20 Prozent kleinere Dateien ohne zusätzlichen Qualitätsverlust. Das Format bringt Tools dafür mit.

Das ist relevant, wenn du auf einem großen Bestand alter Bilder sitzt. 15 Prozent weniger über tausende Bilder summiert sich zu echten Bandbreiten-Einsparungen.

Verlustfreie Kompression: Wo JPEG XL punktet

Für die seltenen Fälle, in denen du wirklich verlustfreie Kompression brauchst, ist JPEG XL der klare Sieger. Verlustfreies WebP ist 9 bis 17 Prozent größer bei Fotos, und verlustfreies AVIF sogar 30 bis 120 Prozent größer als JPEG XL-Äquivalente.

Aber: Verlustfreie Bilder sind für Web-Auslieferung fast nie die richtige Wahl. Die Dateigrößen-Strafe lohnt die Qualitätsvorteile selten. Wenn du verlustfreie Bilder auf Webseiten anzeigst, denk nochmal nach. Und wenn du jixel nutzt: Sei vorsichtig mit höheren Effort-Einstellungen – der Encoder produziert manchmal Dateien, die schmerzhaft langsam dekodieren.

Was das für deine Projekte bedeutet

Meine praktische Empfehlung: Setze auf AVIF mit 4:4:4 Chroma-Subsampling und maximalem Effort. Die Qualitätsgewinne rechtfertigen das langsamere Encoding, und die Dateigrößenvorteile gegenüber JPEG XL sind bei den meisten Anwendungsfällen erheblich.

Trotzdem: Teste mit deinen echten Inhalten. Die Benchmarks zeigen Ausreißer, wo JPEG XL gleichauf liegt oder sogar besser abschneidet. Wenn du mit bestimmten Bildtypen arbeitest, bei denen AVIF schlecht zu funktionieren scheint, probier jixel-kodiertes JPEG XL zum Vergleich.

Beide Formate haben sich in letzter Zeit stark verbessert. Was heute richtig aussieht, könnte in sechs Monaten anders aussehen. Die Formatlandschaft entwickelt sich rasant weiter.

Das große Ganze

Bildoptimierung ist mehr als nur Format-Auswahl. Es geht um Build-Pipelines, CDN-Konfiguration, Responsive-Image-Handling und Lazy-Loading-Strategien. Das Format ist nur ein Hebel von vielen.

Für Entwickler, die Vibe Hosting nutzen, ist die gute Nachricht, dass moderne Hosting-Infrastruktur diese Formate nativ unterstützt. Die Kompression passiert einmal beim Deploy; die Performance-Vorteile fließen automatisch an jeden Besucher.

Lass dich nicht von Format-Unsicherheit lähmen. AVIF ist heute der sicherere Standard. Aber bleib informiert – die Bildformat-Schlachten sind noch lange nicht vorbei, und der Wettbewerb treibt Verbesserungen voran, von denen wir alle profitieren.

Welche Bildformate nutzt du in deinen aktuellen Projekten? Hast du schon mit AVIF oder JPEG XL experimentiert? Ich würde gerne von deinen Erfahrungen hören.