WebP en AVIF, de uitdagers van JPG


WebP wordt min of meer volledig ondersteund, AVIF niet. Ik maakte een snelle ondersteuning controle voor je eigen browser. Ook vind je hier een overzicht waar je van AVIF naar JPG kunt omvormen.




De meest gebruikte afbeeldingsformaten zijn JPG en PNG. WebP is in opkomst, een formaat dat sterk wordt aanbevolen door Google. Het WebP (weppie) formaat is goed in het verder comprimeren van foto's.


AVIF, is veel nieuwer en eigenlijk een afgeleide van video formaten. AVIF produceert ook veel kleinere bestanden zonder merkbaar kwaliteitsverlies.

Kortom, zowel WebP als AVIF zijn initiatieven om de verouderde JPG te vervangen. Het blijkt echter dat oude en goed ondersteunde formaten niet zo gemakkelijk worden verdrongen. Dit is vooral te wijten aan het gebrek aan ondersteuning voor deze afbeeldingen door de belangrijkste browsers. Safari heeft bijvoorbeeld lange tijd geen ondersteuning geboden voor WebP, maar dat is aan het veranderen.


Er is nu beperkte ondersteuning voor AVIF, maar je kunt ze bekijken met Chrome voor Desktop. Naast browsers zullen ook applicaties voor het bouwen en onderhouden van websites deze formaten moeten ondersteunen, en dat is zeker nog niet het geval.


Controleer browserondersteuning voor WebP en AVIF

Hier is een eenvoudige HTML-pagina die controleert of uw browser WebP en/of AVIF ondersteunt:


https://www.hoeijmakers.net/browser-support-webp-avif/


WebP

De eerste afbeelding op de testpagina moet WebP zijn. Als uw browser dit niet ondersteunt, staat er JPG op de afbeelding.

De afbeelding is 768 bij 1008 pixels groot. In JPG weegt de afbeelding 333 KB's en in WebP 171 KB's. Een besparing van bijna 50%.

De hier gebruikte HTML-code is standaard HTML5. De code controleert of een bepaald formaat wordt ondersteund en valt anders terug op iets bekends:


<afbeelding>
  <source srcset="Amsterdam-WebP.webp" type="image/webp">
  <source srcset="Amsterdam-JPG.jpg" type="image/jpeg"> 
  <img src="Amsterdam-JPG.jpg" alt="Amsterdam">
<afbeelding>


AVIF

En dezelfde test voor het veel nieuwere AVIF-formaat. De AVIF-afbeelding is nog eens 12% lichter dan de WebP.


JPG

Als je browser zowel WebP als AVIF ondersteunt (zoals de laatste versie van Chrome) kun je hier de JPG bekijken om de kwaliteit te vergelijken:



<