Google wilt niet dat we JPEG XL afbeeldingen gebruiken, maar is dat wel OK?

Als webdesigner blijf ik graag op de hoogte van de nieuwe bestandsformaten. Bovendien zorgen we bij Motionmill voor snellere websites door afbeeldingen te optimaliseren en meer.

JPEG XL is hiervoor een veelbelovend bestandsformaat dat kleinere bestanden belooft aan een betere kwaliteit. Het resultaat? Snellere, mooiere websites die ook minder energie zullen verbruiken… als je die nieuwe JPEG XL bestanden tenminste kon gebruiken op het web.

Even een reminder van wat de klassieke bestandsformaten zijn voor webafbeeldingen

• GIF – veel mensen kennen GIF’s als de bewegende afbeeldingen, maar het .gif formaat werd zeker vroeger ook gebruikt voor statische beelden.
  • Bouwjaar: 1987
  • Voordelen:
    • GIF’s worden ondersteund door alle moderne webbrowsers.
    • Je kan verschillende afbeeldingen achter elkaar opslaan in hetzelfde bestand. Het resultaat? Animatie!
    • Compressie zorgt voor relatief kleine afbeeldingen qua bestandsgrootte.
  • Nadelen:
    • Je bent beperkt tot 256 kleuren, dus die mooie foto’s die je trok gaan aan kwaliteit verliezen.
    • Ook die compressie is hier niet ideaal, want ze zorgt voor kwaliteitsverlies en is onomkeerbaar. Dit soort compressie nomen we lossy (“met verlies”).
    • Als je bewegende GIF lang wordt, dan wordt de bestandsgrootte al snel gigantisch.

• JPEG – een bestandsformaat voor statische afbeeldingen met een betere compressie dan GIF. Voor afbeeldingen met compressie is de  JPEG het meest gebruikte formaat ter wereld.
  • Bouwjaar: 1992
  • Voordelen:
    • JPEG’s worden ondersteund door alle moderne webbrowsers.
    • Voor een statische afbeelding biedt JPEG betere compressie aan dan GIF, wat je afbeeldingen sneller doet laden.
    • Je kan 16 miljoen verschillende kleuren gebruiken.
  • Nadelen:
    • Je verliest behoorlijk veel kwaliteit door de lossy JPEG-compressie, al zeker als je er meer van gebruikt voor een kleinere bestandsgrootte.
    • Moderne compressietechnieken leveren een beter resultaat op qua kwaliteit en bestandsgrootte
    • Afbeeldingen kunnen geen transparantie bevatten wat het formaat minder handig maakt voor afbeeldingen zoals logo’s, waarbij je een transparante achtergrond wilt gebruiken.

• PNG – een bestandsformaat voor statische* afbeeldingen met compressie zonder kwaliteitsverlies.
  • Bouwjaar: 1996
  • Voordelen:
    • PNG’s worden ondersteund door alle moderne webbrowsers.
    • De compressie van een PNG gebeurt zonder kwaliteitsverlies. Dit soort compressie noemen we lossless (“verliesloos”). PNG afbeeldingen zijn daarom de meest populaire keuze op het web wanneer de kwaliteit van je foto’s cruciaal is.
    • Een PNG kan transparantie bevatten en is dus ideaal voor zaken zoals logo’s met een transparante achtergrond.
  • Nadelen:
    • Er is wel compressie die zorgt voor een lagere bestandsgrootte dan die van je bronfoto’s, maar PNG bestanden zullen nog steeds meer ruimte innemen, en dus trager laden, dan een equivalente JPEG.
    • Moderne compressietechnieken leveren een beter resultaat op qua kwaliteit en bestandsgrootte.

* Geanimeerde PNG’s bestaan en bieden een betere kwaliteit aan dan GIF’s, maar voor de langste tijd kon je ze niet zien op veel webbrowsers. Tegenwoordig is die ondersteuning er wel, maar er zijn ook alternatieven op de markt. Ik zou een hele blog kunnen toewijden aan geanimeerde afbeeldingen en hun bestandsformaten, dus hier ga ik niet verder op ingaan in dit artikel.

Wat je hier steeds leest is het zinnetje “moderne compressietechnieken leveren een beter resultaat op qua kwaliteit en bestandsgrootte”.

Je zou het misschien niet denken, maar afbeeldingen zijn namelijk iets waar elke websitebouwer wat mee sukkelt. Op het web wil je afbeeldingen gebruiken met een kleine bestandsgrootte, zodat je pagina’s snel laden. Tegelijkertijd gebruiken we tegenwoordig grotere schermen met een hogere resolutie om websites te bekijken, dus ook de vereiste beeldkwaliteit en grootte van foto’s stijgt. Onze uitdaging is dat er geen perfecte oplossing bestaat voor zowel snelheid als een perfecte beeldkwaliteit.

Vandaar dat developers al jaren nieuwe opvolgers proberen te bedenken voor de klassieke PNG, JPEG en GIF. Het probleem? Je kan wel zo’n opvolger uitvinden, maar een nieuw bestandsformaat zal pas werken wanneer de ontwikkelaars van je webbrowser ze aanpassen zodat die ze kan weergeven. Vaak gebeurd dat dus niet en dan sterft zo’n veelbelovend bestandsformaat een stille dood.

Vroeger waren webbrowsers divers, nu zijn ze gemaakt van chroom.

Die ondersteuning in Google Chrome heeft een grote impact. Niet alleen is Chrome verreweg de meest populaire webbrowser met een marktaandeel van meer dan 65%, ook andere grote spelers zoals Microsoft Edge, Samsung Internet en Opera gebruiken de webbrowser code van Google in de vorm van Chromium. Firefox is tegenwoordig een van de weinige grote webbrowsers die geen Chrome-code gebruikt.

Met andere woorden, als Google een nieuwe ontwikkeling ondersteund dan volgt de rest van het web. Ze moeten wel. En als Google dat niet doet? Tja, dan kan je dat nieuw snufje eigenlijk niet gebruiken op je website. Je wilt toch niet dat 80% van je bezoekers je afbeeldingen niet kunnen zien?

Toen Google 2 maanden geleden ondersteuning voor het nieuwe JPEG XL formaat toevoegde aan Google Chrome, was ik dus verheugd. JPEG XL is een modern bestandsformaat dat zowel de JPEG, PNG als GIF kan vervangen, met een betere kwaliteit en een kleinere bestandsgrootte.

• JPEG XL – een modern bestandsformaat dat alle bestaande bestandsformaten voor afbeeldingen kan vervangen.
  • Bouwjaar: 2022
  • Voordelen:
    • De compressie JPEG XL kan zowel losless zijn en gebeurt dan zonder kwaliteitsverlies (zoals PNG), of lossy voor een kleinere bestandsgrootte (zoals JPEG).
    • Ook een JPEG XL kan transparantie bevatten en is dus ideaal voor zaken zoals logo’s met een transparante achtergrond.
    • Je kan net zoals met een GIF verschillende afbeeldingen achter elkaar opslaan in hetzelfde bestand. Het resultaat? Animatie!
    • De bestandsgrootte van een JPEG XL is kleiner dan die van de huidige alternatieven, én de lossy compressie levert een betere kwaliteit op dan die van een JPEG en moderne alternatieven zoals WebP en AVIF.
    • Als je een JPEG omzet naar een JPEG XL, bespaar je niet alleen enorm veel ruimte (tot wel 65% voor een gelijkaardige kwaliteit), je kan een JPEG XL ook steeds terug omzetten naar een JPEG zonder kwaliteitsverlies.
  • Nadelen:
    • Er is nog zo goed als geen ondersteuning voor JPEG XL op het web.
    • Dat is het eigenlijk…

Sneak Preview: JPEG XL decoding working in Chrome – 65% smaller than a JPEG at comparable quality.

JXL aims to offer better image quality at low sizes, progressive decoding, lossless JPEG recompression and more: https://t.co/sErChStUHZ pic.twitter.com/duF8UakLzC

— Addy Osmani (@addyosmani) April 7, 2021

Wat een mirakel!

Google heeft het toch anders gedacht. Geen toekomst voor JPEG XL?

Het had nog geen 2 maanden mogen duren, en Google kondigde al aan dat JPEG XL ondersteuning verwijderd wordt in de volgende versie van Google Chrome. Ondertussen is dit ook wel degelijk gebeurd. Te snel om van JPEG XL een nieuwe webstandaard te maken. Blijkbaar was het maar een “experiment”.

De reden? Officieel was er te weinig interesse en zouden er te weinig technische voordelen zijn, maar ik vind dat een vreemde redenering. 2 maanden is te snel om van iets een nieuwe webstandaard te maken en andere webbrowsers ondersteunden het formaat nog niet. De ondersteuning voor JPEG XL was er bovendien enkel als je in je instellingen dook. Wij konden hier dus ook nog geen JPEG XL foto’s gebruiken zonder dat dit problemen zou veroorzaken.

Nochtans zijn er grote namen die achter JPEG XL staan als opvolger van de klassieke bestandsformaten: Facebook, Shopify, Adobe, Intel, Mozilla an jawel… Google. Ze hebben zelf meegedaan aan de ontwikkeling van JPEG XL!

Alleen heeft Google ook meegedaan aan de ontwikkeling van andere formaten. WebP bijvoorbeeld, een nieuwer soort afbeelding die voor kleinere bestandsgroottes zorgt dan de JPEG én animatie ondersteund. Het nadeel? Dat verlies in kwaliteit is nog steeds sterk aanwezig.

Dat is juist wat de JPEG XL ging oplossen. Maar er komt nog een nieuwe speler op de markt: de AVIF. AVIF is een beetje de concurrent van JPEG XL, want ze biedt gelijkaardige voordelen aan. Google hielp ook mee aan de ontwikkeling van de AVIF en het lijkt erop dat ze de voorkeur van het bedrijf geniet. Met als gevolg dat een 70% van alle webbrowsers dit nieuwe formaat al ondersteund.

Probleem opgelost? Nee! Want in vergelijkende tests scoort de JPEG XL beter dan de AVIF. Een AVIF maken duurt veel langer dan een JPEG XL, en het kwaliteitsverlies bij zwaardere compressie is slechter bij de AVIF.

Waarom die keuze dan? Ik speculeer, maar het is mogelijk dat er een soort van interne rivaliteit bestaat tussen spelers achter de twee formaten binnen Google. En die AVIF spelers, die hebben blijkbaar meer te zeggen in het bedrijf. Office politics noemen ze dat. Bovendien heeft Google een negatieve reputatie om projecten te liquideren. Neem maar eens een kijkje op Killed by Google.

Je hebt het misschien al gehoord, Google heeft een reputatie om haar diensten en producten snel stop te zetten. Killed by Google zet het op een rijtje.

Wat de reden ook is, als er niets mis is met de JPEG XL mag het toch niet in de weg staan van technologische innovatie?

Iedereen met een website kan de JPEG XL goed gebruiken, dus laat je stem horen

Tegenwoordig zie je vaak WebP afbeeldingen op onze sites, maar ik vind ze geen ideale oplossing. In de toekomst wordt het misschien AVIF. Maar mijn standpunt is simpel: AVIF mag blijven, maar ik wil ook de JPEG XL kunnen gebruiken. Zeker omdat Google Chrome al JPEG XL afbeeldingen kon weergeven. Houd dat toch gewoon zo!

Misschien is het ijdele hoop, maar volgens mij is het nog niet te laat om Google van gedachte te doen veranderen. Het is daarom mijn hoop dat ik niet de enige ben die het eens over de JPEG XL wil hebben. Misschien ken jij nog andere mensen die de boodschap kunnen verspreiden?

Of het nog een verschil gaat maken weet ik niet, maar ik wilde het toch maar proberen door er een blog over te schrijven. En ik hoop in ieder geval dat je iets hebt geleerd over de verschillende bestandsformaten van afbeeldingen en waarom ze een invloed hebben op je website.

Deel dit bericht