Er zijn twee duidelijke koplopers in de strijd om het kleinste beeldformaat. WebP en AVIF. Waar voorheen JPEG het belangrijkste en dominantste beeldformaat was, gaat dat in de toekomst WebP of AVIF zijn. Beide formaten overtreffen JPEG in vele belangrijke opzichten.
Maar waarom is AVIF beter dan WebP? Deze vraag staat centraal in dit blog. Welk formaat heeft de betere beeldcompressie en dus de kleinere bestandsgrootte? Welk formaat heeft de beste browser support? Met dit artikel willen we deze vragen beantwoorden door de prestaties en eigenschappen van deze twee geavanceerde beeldformaten te vergelijken.
We gaan de formaten op drie gebieden met elkaar vergelijken:
- Kwaliteit
- Compressie
- Browserondersteuning
Kwaliteit van AVIF t.o.v. WebP
AVIF is een formaat dat afgeleid is van frames van video met de AV1 codec, en er zijn enkele beperkingen voor de beeldafmetingen waar gebruikers op moeten letten. AVIF heeft een beeldresolutie limiet van 65536 x 65536 pixels.
Standaard heeft AVIF een limiet van 8K (7,680 x 4,320 pixels), maar het is mogelijk deze limiet te overschrijden door onafhankelijk gecodeerde tegels te renderen. Maar, met artefacts aan de randen van elke tegel, is AVIF ongeschikt voor beelden met een grote resolutie.
WebP heeft ook een harde limiet voor de resolutie van een beeld. De maximale afmeting van WebP is 16.383 x 16.383. Hoewel dit een verbetering is ten opzichte van de standaard AVIF limiet, is er geen manier om dit te verbeteren zoals AVIF dat kan. Geen van beide formaten is te vergelijken met de beperkingen van PNG en JPEG 2000 met respectievelijk 2500 megapixels en 5000 megapixels als limiet.
WebP heeft veel beperkingen ten opzichte van AVIF vanwege de brede kleurengamma en precisie-ondersteuning die AVIF biedt. WebP ondersteunt slechts een maximale bitdiepte van 8 bits en ondersteunt wel een breed kleurbereik/HDR beelden. Daarentegen ondersteunt WebP geen beelden zonder chroma subsampling.
AVIF heeft een maximale bit diepte van 10, ondersteunt 4:4:4, en ondersteunt HDR foto's. Ondanks WebP's voordeel met max dimensie, vinden we de beperkingen van WebP op kleurgebied te groot om de overwinning in deze categorie aan WebP te geven.
Compressie AVIF vs WebP
Het WebP formaat werd ontworpen om een betere kwaliteit afbeeldingen te bieden met een bestandsgrootte die vergelijkbaar is met die van JPEG. Hoewel WebP dit zeker bereikt, heeft het nieuwere en meer geavanceerde AVIF formaat toch een voorsprong in compressie bij eenzelfde kwaliteit. Zowel bij lossless compressie als bij lossy compressie. Foto's met een hoge kwaliteit bevatten met AVIF geen vervelende compressie bijverschijnselen zoals color-banding of blokkerigheid die bij WebP wel kunnen voorkomen.
WebP presteert slechts marginaal beter dan JPEG in bestandsgrootte voor laag-getrouwe compressie, maar wel met significante verbeteringen in aantrekkelijkheid. Een weinig natuurgetrouwe JPEG foto van 68,3kb wordt omgezet in een WebP bestand van 67,7kb.
Hetzelfde beeld omgezet naar het AVIF formaat geeft een vergelijkbaar 67.6kb bestand. Dit AVIF beeld heeft echter een veel hogere kwaliteit en aantrekkelijkheid dan het equivalente WebP bestand. Het heeft veel minder blokkerigheid en color-banding. Als je de kwaliteit van AVIF dus iets achteruit zou zetten, gelijk met WebP dan wordt de bestandsgrootte van AVIF dus significant kleiner. Bij gelijkblijvende uitstraling is AVIF 30% kleiner.
Browserondersteuning van AVIF in vergelijking tot WebP
Als nieuw bestandsformaat loopt het AVIF beeld achter op andere oudere beeldformaten wat browser ondersteuning betreft. WEBP wordt, over de hele linie, momenteel meer ondersteund dan AVIF. Het verrassende niveau van ondersteuning voor zijn leeftijd geeft echter een goed vooruitzicht op de toekomstige ondersteuning van AVIF in browsers.
Op de desktop bieden zowel Chrome als Opera als eerste volledige ondersteuning voor AVIF. Firefox gebruikers kunnen AVIF ondersteuning inschakelen in de about:config pagina. Dit omvat echter geen ondersteuning voor geanimeerde afbeeldingen. Ondersteuning ontbreekt echter nog voor Safari en Microsoft Edge.
Op mobiel ondersteunen Chrome voor Android, Samsung Internet, en de Android Browser AVIF volledig. Ondersteuning ontbreekt helaas momenteel voor Safari op iOS.
WEBP wordt over de hele linie ondersteund door Edge, Firefox, Chrome, Safari, en Opera. Alle belangrijke mobiele browsers ondersteunen ook WEBP.
Conclusie
WEBP, toen het in 2010 uitkwam, was een overtuigende vervanging voor de vermoeide en verouderde JPEG en PNG formaten. Maar nu, elf jaar later, mist WEBP belangrijke kenmerken die sterk vertegenwoordigd en noodzakelijk zijn in het moderne beeldformaat landschap. Daartoe behoren bijvoorbeeld HDR beelden. Daarom is het, ondanks zijn uitgebreide browser-ondersteuning, moeilijk voor te stellen dat WEBP een dominant beeldformaat zal worden.
Met een over het algemeen betere compressie en uitstekende prestaties bij foto's met een low-fidelity en high appeal (de populairste soort beelden die op het web gebruikt wordt), is AVIF een veelzijdiger beeldformaat. De compressie en optimalisatie gaat nog verder dan WebP. AVIF loopt iets achter op WEBP wat browser ondersteuning betreft. Maar we verwachten we dat Firefox en Safari snel zullen volgen en spoedig volledige ondersteuning voor AVIF zullen bieden. Zodra dit gebeurt, zal AVIF het dominante beeldformaat wordt voor zowel stilstaande als geanimeerde beelden voor het web.
Geweldig! Hoe krijg je AVIF op je website?
Als je AVIF op je website wilt kun je een gratis Quicq account aanmaken. Met Quicq worden je afbeeldingen via de Quicq CDN geserveerd in AVIF formaat (als de browser het ondersteunt) met een fallback naar WebP formaat.
Als je meer over dit onderwerp wilt weten vind je deze artikelen misschien ook interessant:
Vragen over AVIF vs WebP
Wat is AVIF?
Het AV1-beeldformaat (AVIF) is een nieuw open-sourced en royalty free geoptimaliseerd beeldformaat dat elke beeldcodec ondersteunt. Een AVIF-afbeelding biedt een aanzienlijke reductie van de bestandsgrootte in vergelijking met JPEG, PNG en WebP en wordt momenteel ondersteund door Google Chrome, Firefox en Android.
Hoe kan ik AVIF naar JPG converteren?
Er zijn verschillende online tools die WebP bestanden kunnen omzetten naar meer traditionele bestandsformaten zoals JPG.
Hoe AVIF afbeeldingen uploaden naar Wordpress?
Met de Quicq plugin voor WordPress van Afosto zet je eenvoudig en gratis al je afbeeldingen om van het originele formaat naar AVIF. Download de plugin via je admin panel of via https://wordpress.org/plugins/quicq/
Mijn naam is Ton, mede-eigenaar van Afosto en in het bezit van een masterdiploma in International Business and Management. Bij Afosto fungeer ik als een stuwende kracht achter het ondernemerssucces van onze klanten. Mijn diepgaande expertise in e-commerce en mijn passie voor het uitbouwen van bedrijven zijn fundamenteel in mijn werkwijze om retailers te ondersteunen. Met het geavanceerde headless commerce platform van Afosto bied ik inventieve oplossingen die niet alleen de efficiëntie verhogen, maar ook de groei van bedrijven stimuleren. Ik hou er van om mijn kennis te delen zodat we samen succes kunnen hebben.
Meer van Ton Koop