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 ondersteuning browservoor WebP en AVIF

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

Ondersteunt mijn browser WebP en/of 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:

Foto door Rob Hoeijmakers

Ondersteuning voor AVIF in toepassingen

De browsers zijn een goede afspiegeling van hoe ver de acceptatie van een nieuw bestand is. Maar ook de applicaties die met afbeeldingen werken. Ik heb een test gedaan met Squarespace, de online webbouwer, en met Pinterest en beide ondersteunen op dit moment nog niet eens WebP, laat staan AVIF.

Verwante links

Als je zelf wilt experimenteren met WebP of AVIF, is Squoosh een handige site.

Conversie tools

Van AVIF en WebP naar JPG, of van JPG naar AVIF en WebP.

https://cloudconvert.com

https://convertio.co

https://avif.io

Ontvang de nieuwste artikelen!

Aan spam doe ik niet 🙂

Over de auteur

Scroll naar boven