JPEG XL vs. AVIF voor web-use-cases

Conclusies

Ik ga later dieper in op de details met voorbeelden en benchmarks, maar voor wie weinig tijd heeft, zijn dit de belangrijkste punten:

  • Lossy foto's voor het web: AVIF produceert bijna altijd kleinere bestanden dan JPEG XL. Bij standaard instellingen (default effort) is de beste versie van JPEG XL doorgaans 15–25% groter dan de equivalente AVIF. Bij maximale instellingen (maximum effort) wordt dit gat iets kleiner, naar doorgaans 6–20%. Er zijn uitzonderingen waarbij JPEG XL AVIF benadert of verslaat.
  • De JPEG XL-encoder: De keuze van de encoder is cruciaal. jixel, een nieuwere encoder, produceert meestal kleinere bestanden dan libjxl, behalve wanneer de afbeelding gedetailleerde transparantie bevat.
  • Screenshots en illustraties: AVIF is aanzienlijk beter dan JPEG XL. De equivalente JPEG XL is 30–90% groter bij standaard instellingen en 20–70% groter bij maximale instellingen. Lossy AVIF handelt deze afbeeldingen goed af; lossless formaten zijn alleen nodig bij bit-exacte resultaten.
  • Afbeeldingen met transparantie: AVIF is veel beter dan JPEG XL. De libjxl-versie is 31–44% groter bij standaard instellingen en 61–70% groter bij maximale instellingen. Omdat jixel transparantie altijd lossless codeert, zijn de bestanden 2–3x zo groot als die van AVIF.
  • Snelheid en geheugen (Encoder): AVIF is over het algemeen sneller om te coderen en gebruikt minder geheugen in verhouding tot de bestandsgrootte. Hoewel jixel sneller is en minder geheugen gebruikt dan AVIF, zijn de bestanden aanzienlijk groter, waardoor AVIF in balans beter scoort.
  • Snelheid (Decoder): AVIF is sneller te decoderen. JPEG XL duurt doorgaans 2–3x zo lang bij mediume kwaliteit. Bij zeer hoge kwaliteiten wordt het gat kleiner, en in Chrome kan JPEG XL soms zelfs sneller decoderen.
  • Effort-instellingen: Hogere instellingen zijn de moeite waard voor AVIF en jixel, maar niet voor libjxl. Bij libjxl zijn hogere instellingen veel trager, verbruiken ze veel meer geheugen en verbeteren ze het resultaat nauwelijks.
  • AVIF 4:2:0 mode: De 4:2:0 modus (halve kleurresolutie) zou niet de standaard moeten zijn. Het verkleint de bestandsgrootte zelden en maakt het moeilijker om hogere kwaliteiten te bereiken. Gebruik 4:4:4, tenzij je specifiek beide hebt getest.
  • Kwaliteitsinstellingen: Deze zijn betrouwbaar voor alle encoders. Hoewel de uiteindelijke kwaliteit per afbeelding varieert, bewegen alle encoders in dezelfde richting.
  • Progressieve weergave:
  • JPEG XL: Progressief is vrijwel "gratis" bij hoge instellingen. Firefox en Chrome ondersteunen dit. Safari rendert het uiteindelijke beeld, maar toont geen progressieve previews.
  • AVIF: Ondersteunt progressieve weergave (vooralsnog alleen in Chrome, maar in ontwikkeling voor Firefox). Het is complexer dan bij JPEG XL, maar biedt meer controle over de preview, resulteert vaak in kleinere bestanden en is sneller te decoderen.
  • HDR: JPEG XL mist gain maps, wat een aanzienlijke beperking is ten opzichte van AVIF. Hoewel het JPEG XL-formaat gain maps ondersteunt, worden ze niet ondersteund door browser-decoders. Bij vergelijking van HDR-content zonder gain maps produceert JPEG XL echter kleinere bestanden dan AVIF.
  • Transcoding van bestaande JPEGs: JPEG XL kan bestaande JPEGs 9–20% verkleinen zonder verder kwaliteitsverlies. Het is daarnaast even snel of sneller te decoderen, behalve bij kleine afbeeldingen.
  • Lossless: JPEG XL is de duidelijke winnaar. Lossless WebP is 9–17% groter voor foto's, en lossless AVIF is 30–120% groter. Let wel op bij jixel met hoge instellingen: deze kunnen resulteren in bestanden die te traag decoderen voor webgebruik.
  • Animaties: Geanimeerde afbeeldingsformaten blijven een slecht idee. Gebruik videoformaten.

Eindoordeel: Voor web-use-cases zou ik momenteel standaard kiezen voor AVIF 4:4:4, met het hoogste effort-niveau dat praktisch haalbaar is. Als AVIF een ongebruikelijk groot bestand produceert, zou ik kijken of JPEG XL via jixel beter scoort.

---

Methodologie

Ik heb een benchmarking-script gebruikt dat afbeeldingen codeert met diverse codecs en instellingen. De gebruikte versies zijn:

  • avifenc 1.4.2
  • libjxl 0.12.0 (via de cjxl encoder)
  • jixel 0.4.2 (git f487299)
  • cwebp 1.6.0 (voor lossless WebP)

De afbeeldingen zijn gecodeerd naar een breedte van 1598 pixels (2x de maximale breedte op mijn blog) om scherp te blijven op high-density displays. De benchmarks zijn uitgevoerd op een 2024 MacBook Pro (M4 Pro).

---

Analyse per type afbeelding

Lossy - F1-afbeelding

Bij een target-score van 70 (hoog) op de SSIMULACRA2-metric (waarbij 50 medium is en 90 visueel lossless):

  • Bestandsgrootte: AVIF wint. De beste JPEG XL-afbeelding is bij standaard instellingen 14–17% groter. Bij maximale inspanning is de beste JPEG XL (jixel 'extraslow') nog steeds 6–15% groter dan AVIF (s0).
  • Coderingstijd: AVIF wint. jixel is sneller bij standaard instellingen, maar produceert grotere bestanden. Om de grootte van AVIF te matchen, heeft jixel de extraslow-instelling nodig, wat 18–27x langer duurt.
  • Geheugengebruik: AVIF wint. jixel gebruikt bij standaard instellingen ongeveer de helft van het geheugen, maar produceert grotere bestanden. jixel 'extraslow' gebruikt ~10x meer geheugen.
  • Decodingstijd: AVIF wint. JPEG XL duurt 2–3x zo lang bij mediume kwaliteit.
  • Inspanning: Hogere instellingen zijn de moeite waard voor AVIF (s5 geeft ~10% kleinere bestanden) en jixel (tot slow). Voor libjxl is het niet de moeite waard.

Lossy - Mensen (Portretten)

Er wordt vaak beweerd dat de neiging van AVIF om details glad te strijken slecht is voor gezichten.

  • Bestandsgrootte: AVIF wint duidelijk. libjxl is 30–50% groter dan AVIF. jixel scoort beter dan libjxl, maar is bij standaard instellingen nog steeds 17–24% groter dan AVIF.
  • Coderingstijd & Geheugen: AVIF wint. Zelfs de extraslow-instelling van jixel matcht de bestandsgrootte van AVIF's standaardinstelling alleen bij zeer hoge kwaliteit, terwijl het 25–39x langer duurt.
  • Decodingstijd: AVIF wint. JPEG XL duurt 2–2.9x zo lang bij mediume kwaliteit.

Lossy - Rode Panda

Deze afbeelding bevat veel scherpe lijnen (haren).

  • Bestandsgrootte: AVIF wint nipt. Bij standaard instellingen is de beste JPEG XL (jixel) slechts 2–6% groter. Bij maximale instellingen zijn jixel 'extraslow' en AVIF s0 nagenoeg gelijk.
  • Coderingstijd: JPEG XL (jixel) wint volgens SSIMULACRA2. Het is 19–35% sneller dan AVIF bij standaard instellingen, met een minimaal groter bestand.
  • Decodingstijd: AVIF wint. JPEG XL duurt 2–2.4x zo lang bij mediume kwaliteit.

Lossy - Wezel (Uitzondering)

Soms is er een outlier waarbij JPEG XL beter presteert.

  • Bestandsgrootte: JPEG XL wint. Bij standaard instellingen is de beste JPEG XL 4–11% kleiner dan AVIF. Bij maximale instellingen is jixel 'extraslow' 12–27% kleiner dan AVIF s0.
  • Coderingstijd: JPEG XL (jixel) wint. Het is 28–38% sneller dan AVIF en produceert kleinere of gelijke bestanden.
  • Decodingstijd: AVIF wint over het algemeen, behalve in Chrome bij hoge kwaliteiten, waar JPEG XL 11–36% sneller is.

Lossy - Screenshots

  • Bestandsgrootte: AVIF wint overtuigend. JPEG XL is 73–89% groter bij medium/hoge kwaliteit.
  • Coderingstijd & Geheugen: AVIF wint. Hoewel jixel sneller is, zijn de bestanden veel groter.
  • Decodingstijd: AVIF wint met een grote marge. JPEG XL duurt 2–3.8x zo lang.
  • Observatie: Lossy AVIF handelt screenshots zeer goed af, waardoor een lossless formaat vaak overbodig is.

Lossy - Illustraties

Voor afbeeldingen met veel vlakke kleuren:

  • Bestandsgrootte: AVIF wint ruimschoots. JPEG XL (jixel) is 32–65% groter. libjxl presteert hier bijzonder slecht.
  • Coderingstijd & Geheugen: AVIF wint. jixel is sneller, maar de bestanden zijn veel te groot.
  • Decodingstijd: AVIF wint. JPEG XL duurt 2–4.6x zo lang bij medium/hoge kwaliteit.

Lossy - Alpha (Transparantie)

  • Bestandsgrootte: AVIF wint overtuigend. libjxl is 31–44% groter bij standaard instellingen. jixel codeert alpha altijd lossless, waardoor de bestanden 1.9–3.1x zo groot zijn als die van AVIF.
  • Decodingstijd: AVIF wint. libjxl duurt 2–3x zo lang bij mediume kwaliteit.

Lossy - Kleine vs. Grote afbeeldingen

  • Kleine afbeeldingen: De resultaten zijn vergelijkbaar met de F1-afbeelding; AVIF wint op bijna alle fronten.
  • Grote afbeeldingen (18 megapixel): AVIF wint bij medium/hoge kwaliteit. Echter, bij zeer hoge kwaliteit (SSIMULACRA2 ~85) haalt JPEG XL het in. jixel 'slow' is 10–13% kleiner dan AVIF's standaardinstelling vanaf een score van 80.

---

Kwaliteitsstabiliteit

Er is kritiek dat de kwaliteit van AVIF onbetrouwbaar zou zijn (dat een vaste instelling bij de ene afbeelding perfect werkt en bij de andere niet). Mijn tests tonen echter aan dat alle drie de codecs (avifenc, cjxl, jixel) een vergelijkbaar gedrag vertonen: ze scoren allemaal hoger of lager op dezelfde typen afbeeldingen. Dit lijkt een inherent kenmerk van beeldcompressie en geen specifiek gebrek aan AVIF.

---

Progressieve weergave

Beide formaten kunnen een afbeelding progressief laden.

  • Werking JPEG XL: Gebruikt "progressive DC", waarbij een decoder eerst een lage resolutie versie rendert voordat de hoge resolutie tiles worden geladen.
  • Werking AVIF: Werkt meer als frames van een video. Je kunt tot vier frames definiëren. Dit geeft meer controle over hoe de preview eruitziet (bijvoorbeeld een 1/8e resolutie versie met blur).
  • Gebruikerservaring: Progressieve AVIF biedt een representatieve preview die direct duidelijk maakt wat er afgebeeld staat. JPEG XL begint vaak met een BlurHash-achtige preview, maar duurt langer voordat het een bruikbare weergave geeft.
  • Overhead: Bij libjxl is progressief vrijwel gratis. Bij AVIF is er meer overhead in coderingstijd en geheugen, maar het blijft vaak sneller te decoderen dan progressief JPEG XL.

---

Lossy - HDR

Bij HDR zijn er twee methoden: Perceptual Quantization (PQ) en Gain maps.

  • Gain maps: De afbeelding bestaat uit een SDR-beeld en een gain map voor HDR-displays. Dit is superieur omdat het beeld er op SDR-schermen precies zo uitziet als gewenst en op HDR-schermen optimaal wordt aangepast aan de helderheid van het paneel.
  • Ondersteuning: AVIF ondersteunt gain maps volledig. JPEG XL ondersteunt ze in het formaat, maar browser-decoders ondersteunen ze (nog) niet.
  • Prestaties (PQ): Bij vergelijking van alleen PQ-varianten produceert JPEG XL kleinere bestanden, maar AVIF is sneller te decoderen.

---

JPEG Transcoding

JPEG XL kan bestaande JPEGs converteren naar JPEG XL zonder kwaliteitsverlies.

  • Resultaat: De bestanden worden 9–20% kleiner.
  • Snelheid: Voor grote afbeeldingen is de JPEG XL-versie in Chrome en Safari sneller te decoderen dan de originele JPEG.

---

Lossless

Voor lossless beelden is de rangorde anders:

  • Bestandsgrootte: JPEG XL is de winnaar. WebP is 9–17% groter voor foto's, en AVIF is 33–122% groter.
  • Codering: JPEG XL (libjxl) is zeer efficiënt in bestandsgrootte en coderingstijd.
  • Decoding: WebP is vaak het snelst in het decoderen van lossless beelden. Lossless AVIF is zowel groot als traag.
  • Tip: jixel op de medium-instelling is vaak het "sweet spot" voor lossless bestandsgrootte.

---

Animatie

Geanimeerde afbeeldingsformaten zijn inefficiënt vergeleken met videoformaten.

  • AVIF vs. JPEG XL: Geanimeerde AVIF is aanzienlijk kleiner en kwalitatief beter dan geanimeerd JPEG XL. Dit komt omdat AVIF in feite een repackaging is van AV1-video, dat gebouwd is voor beweging.
  • Advies: Gebruik <video muted autoplay> in plaats van geanimeerde afbeeldingen.