Wat zijn avif-afbeeldingen?

AVIF staat voor AV1 Image File Format. Het is een beeldformaat dat is afgeleid van de AV1-videocodec en dat bij dezelfde beeldkwaliteit een stuk kleinere bestanden oplevert dan JPEG, en meestal ook kleiner dan WebP.

Het bestaat sinds 2019 en wordt inmiddels door alle browsers ondersteund die er in Nederland toe doen. De prijs die je ervoor betaalt zit niet in de kwaliteit maar in de rekentijd: een AVIF maken kost een veelvoud van wat een JPEG kost.

Waar het formaat vandaan komt

AVIF is een bijproduct van een videoproject. De Alliance for Open Media werd in 2015 opgericht door onder meer Google, Netflix, Mozilla, Intel, Microsoft en Amazon, met Apple dat er later bij kwam. Het doel was een videocodec die geen licentiekosten heeft.

Die codec werd AV1 en lag in 2018 vast. Kort daarna kwam iemand op het idee dat één beeldje uit zo'n videostroom ook prima als losse afbeelding kan dienen. De specificatie van AVIF verscheen in 2019.

De verpakking komt van elders. Een AVIF zit in dezelfde containerstructuur als HEIC, het formaat dat een iPhone voor foto's gebruikt. Het verschil zit in de inhoud: HEIC gebruikt HEVC, waar patenten op rusten, en AVIF gebruikt AV1, dat vrij te gebruiken is.

Waarom het bestand kleiner wordt

Een codec voor bewegend beeld moet extreem zuinig zijn, want er komen tientallen plaatjes per seconde langs. Die zuinigheid krijg je bij een stilstaand beeld gratis mee.

Het beeld wordt in blokken verdeeld en voor elk blok voorspelt de codeerder hoe het eruit gaat zien op basis van wat er al naast en boven staat. Alleen het verschil met die voorspelling gaat het bestand in. AV1 kan die blokken veel groter of juist veel kleiner maken dan JPEG, en heeft aanzienlijk meer richtingen en methodes om mee te voorspellen.

Daar komt een truc bij die JPEG niet kent. AV1 kan de kleurinformatie afleiden uit de helderheidsinformatie die in hetzelfde blok al is opgeslagen. In een gebied waar helderheid en kleur samen oplopen, zoals een gezicht of een zonsondergang, scheelt dat veel.

Wat er dan nog overblijft wordt weggeschreven met een rekenkundige codeerder die zuiniger is dan de tabelmethode uit JPEG. Het resultaat zie je het duidelijkst in vlakken met langzame kleurovergangen: luchten, huid, schaduwen, verlopen in een achtergrond. Dat is precies waar JPEG blokjes en randjes maakt.

Wat AVIF kan en JPEG niet

De lijst is langer dan mensen denken, en het is de reden dat AVIF vaak drie oudere formaten tegelijk vervangt.

• Transparantie. Een alfakanaal zoals PNG, waarmee je een logo of productfoto zonder achtergrond kunt uitleveren.
• Animatie. Bewegende beelden zoals een GIF, maar dan met de compressie van moderne video erachter.
• Meer kleurdiepte. Tien of twaalf bits per kanaal in plaats van acht, waardoor een verloop niet in banden uiteenvalt.
• Groter kleurbereik en HDR. Kleuren die buiten het oude sRGB-bereik vallen, met de bijbehorende helderheidsinformatie.
• Opslag zonder verlies. Een stand waarin er niets van het origineel afgaat, vergelijkbaar met PNG maar zuiniger.

Er zit zelfs een functie in die filmkorrel weghaalt bij het comprimeren en er bij het tonen een nagemaakte korrel voor terugzet. Willekeurige ruis is namelijk het duurste dat je kunt opslaan.

Wat AVIF slechter doet

Dit stuk staat zelden in de stukken die je over AVIF leest, en het bepaalt wel of overstappen zin heeft.

Het beeld komt in één keer op je scherm. Een progressieve JPEG toont eerst een grove versie en wordt scherper naarmate er meer binnenkomt; AVIF doet dat in de praktijk niet. Je ziet niets, en dan ineens alles. Op een trage verbinding voelt dat trager, ook al is het bestand kleiner.

Kleine afbeeldingen worden niet kleiner. Een AVIF draagt een stukje administratie mee, en bij een icoontje weegt die administratie zwaarder dan de winst. Daar is PNG of WebP zuiniger.

Dan zijn er nog de scherpe lijnen en de gekleurde tekst. De meeste codeerders zetten AVIF standaard weg met halve kleurinformatie. Bij een foto merk je dat niet, bij een schermafdruk met blauwe koppen of een logo met dunne letters wel: de randen krijgen een waas. Je kunt overschakelen op volledige kleurinformatie, maar dan is een deel van de winst weg.

Ook aan de bovenkant van de kwaliteitsschaal loopt het spaak. Zet je de kwaliteit tegen het maximum aan, dan wordt een AVIF soms groter dan de JPEG waar je vandaan kwam. De winst zit in het middengebied en bij hard knijpen.

En het uitpakken kost meer van het toestel dan bij een JPEG. Op een oudere telefoon met tien grote afbeeldingen op één pagina is dat merkbaar in de tijd tot het scherm staat.

Rekentijd: waar je dit echt voelt

Hier zit de echte prijs van AVIF. Een AVIF maken kan tientallen keren zoveel processortijd kosten als dezelfde afbeelding als JPEG wegschrijven.

Dat komt doordat de codeerder al die voorspellingsmethodes en blokindelingen langsgaat om de beste te vinden. Elke gereedschapskist heeft daarom een snelheidsknop, meestal een schaal van nul tot tien, waarbij nul de kleinste bestanden geeft en uren kan duren en tien vlot gaat maar duidelijk minder oplevert.

Er is ook verschil tussen de programma's zelf. De oorspronkelijke codeerder van de Alliance for Open Media is grondig en traag. De variant die Intel en Netflix samen ontwikkelden is een stuk sneller bij vergelijkbaar resultaat, en de meeste plugins en beelddiensten zijn daar inmiddels op overgestapt.

Bij één afbeelding merk je hier niets van. Bij een bulkconversie van een mediabibliotheek met duizenden foto's wel, en dan komt de rekening bij je server terecht.

Wat er dan misgaat is voorspelbaar. Een script dat via de beheeromgeving draait loopt tegen de maximale uitvoertijd van PHP aan en breekt af, of het geheugen raakt op bij een grote foto. Bij gedeelde hosting is een conversie in kleine porties over meerdere nachten verstandiger dan in één keer.

Welke browsers het aankunnen

Alle browsers die er nu toe doen. Chrome kan het sinds augustus 2020, Firefox sinds oktober 2021 en Safari sinds versie 16 in het najaar van 2022, dus vanaf iOS 16 en macOS Ventura. Bewegende AVIF-bestanden kwamen in Safari iets later, met versie 16.4 in het voorjaar van 2023.

Edge liep achter, omdat die afhankelijk was van een onderdeel van Windows zelf, en had het pas begin 2024 standaard aanstaan.

Wie in Nederland een telefoon of computer gebruikt die de afgelopen jaren nog updates heeft gekregen, krijgt AVIF dus gewoon te zien. De groep die overblijft is klein en zit vooral op oude Android-toestellen en op verouderde bedrijfscomputers met een browser die vastgezet is.

Buiten de browser is het beeld rommeliger. macOS toont AVIF sinds Ventura in de verkenner en in Voorvertoning. Windows heeft er een extra onderdeel uit de Microsoft Store voor nodig voordat je een miniatuur in de verkenner ziet, en zonder dat onderdeel lijkt het alsof je bestand kapot is. Ook lang niet elk bewerkingsprogramma kan een AVIF openen of opslaan.

De terugvaloptie regelen

Voor die kleine restgroep lever je een tweede versie mee, en dat gaat op dezelfde twee manieren als bij WebP.

De eerste is in je HTML: je zet meerdere bronnen onder elkaar in een picture-element, met AVIF bovenaan, WebP eronder en de JPEG als laatste. De browser pakt de eerste die hij begrijpt en kijkt niet verder, dus de volgorde is het enige dat telt.

De tweede gaat op de server, die uit een kopregel van de browser afleidt welke formaten er mogen. Hoe dat werkt en waarom het met caches kan botsen staat in het artikel over webp afbeeldingen.

Eén ding dat je zelf moet controleren: je server moet het bestandstype image/avif kennen. Op oudere serverconfiguraties staat dat er niet bij, en dan wordt het bestand als download aangeboden in plaats van getoond. Je ziet dan een leeg vak op je pagina terwijl het bestand er gewoon staat.

Wat WordPress sinds versie 6.5 doet

Sinds WordPress 6.5, uit het voorjaar van 2024, kun je AVIF-bestanden gewoon uploaden naar je mediabibliotheek. WordPress herkent ze, maakt er de gebruikelijke kleinere afmetingen van en zet ze netjes in de bewerker.

Dat lukt alleen als je server het aankan. Je hebt PHP 8.1 of hoger nodig met een beeldbibliotheek die AVIF kent, dus ImageMagick of GD in een versie die ermee is gebouwd. Bij goedkope hosting is dat niet vanzelfsprekend. In het overzicht onder Gereedschap en Sitestatus kun je zien welke bestandstypen je installatie ondersteunt.

Wat WordPress niet doet, is je bestaande JPEG-bestanden omzetten. Die stap zit niet in de kern en gaat er ook niet in komen, onder meer omdat het per upload extra schijfruimte kost. Wie het toch in de kernrichting wil houden gebruikt de plugin Modern Image Formats van het prestatieteam van WordPress zelf, die nieuwe uploads omzet en AVIF kiest als de server dat aankan.

Let op wat dat met je schijf doet. WordPress maakt van elke upload een handvol formaten in verschillende afmetingen. Zet je AVIF én WebP aan naast je origineel, dan komen er per foto twee keer zoveel bestanden bij. Dat groeit sneller dan mensen verwachten, en bij een pakket met een limiet op opslag loop je daar tegenaan.

Hoe je het in de praktijk aanzet

Op een WordPress-site doet een plugin het werk. ShortPixel, Imagify, EWWW en Smush kunnen alle vier AVIF naast je origineel zetten en zorgen dat de juiste versie wordt uitgeleverd. Hoe zo'n plugin te werk gaat staat in het artikel over ShortPixel en kleine afbeeldingen.

Bij een aantal daarvan gebeurt het comprimeren op de servers van de leverancier. Voor AVIF is dat een voordeel, want dan is die rekentijd niet jouw probleem. Het betekent wel dat je afbeeldingen het pand verlaten en dat je aan een tegoed vastzit.

Het kan ook onderweg. Sommige diensten voor je verkeer maken een AVIF van je afbeeldingen op het moment dat een bezoeker ze opvraagt en bewaren die versie in hun eigen cache. Wat zo'n tussenlaag verder doet staat in het artikel over Cloudflare.

Wil je losse bestanden omzetten, dan kan dat in de browser met Squoosh, of op je eigen machine met avifenc uit de gereedschapskist libavif. Dat werkt prima bij tien afbeeldingen voor een nieuwe pagina en niet bij een hele bibliotheek.

Wanneer je beter bij WebP blijft

Niet elk beeld wordt beter van AVIF, en soms zou ik het gewoon niet doen.

Schermafdrukken en interfacebeelden bijvoorbeeld, met hun dunne lijnen en gekleurde tekst. WebP houdt die randen scherper tenzij je AVIF op volledige kleurinformatie zet, en dan is het voordeel weg. Datzelfde geldt voor kleine pictogrammen en logo's: onder een paar kilobyte wint AVIF het zelden, en een SVG is daar meestal het betere antwoord.

Heb je een grote bibliotheek op lichte hosting, dan weegt de rekentijd zwaarder dan de winst. Als de conversie je site elke nacht plat legt, doe dan WebP voor het geheel en AVIF alleen voor de zware koppen bovenaan je belangrijkste pagina's.

En draait WebP al naar tevredenheid, dan hoef je niets. De sprong van JPEG naar WebP is groot, de sprong van WebP naar AVIF is een verbetering en geen noodzaak. Zet AVIF ernaast als je plugin het kan en laat de browser kiezen. Dat kost je vijf minuten en verder geen aandacht.

Waar je AVIF beter helemaal niet gebruikt

Op een paar plekken hoort het formaat gewoon niet thuis, en die staan zelden in de handleiding van een plugin.

In een nieuwsbrief niet, want e-mailprogramma's lopen jaren achter op browsers. En niet als deelafbeelding voor sociale media: de plaatjes die WhatsApp, LinkedIn en Facebook onder een gedeelde link tonen worden door hun eigen programma's opgehaald, en die verwachten JPEG of PNG. Krijg je een lege voorvertoning bij het delen, dan is dit de eerste plek om te kijken.

Ook niet als bronbestand. AVIF is een uitleverformaat, geen archiefformaat, en opnieuw comprimeren vanuit een gecomprimeerd bestand kost elke keer kwaliteit.

De instellingen die het verschil maken

Een paar knoppen maken veel meer uit dan de keuze tussen AVIF en WebP.

Verklein voordat je comprimeert. Een foto van 4000 pixels breed die in een vak van 600 pixels wordt getoond blijft verspilling, in welk formaat dan ook. Dit is nog steeds de grootste winst die de meeste sites laten liggen.

Blijf uit de uitersten van de kwaliteitsschaal. Knijp je te hard, dan krijg je een wasachtig beeld en zie je dat het eerst bij huid, haar, gras en textiel. Zet je hem tegen het maximum, dan verlies je precies het voordeel waar je het voor deed. Loop na de eerste ronde je productfoto's na op ware grootte, niet als miniatuur.

Bewaar je originelen op een plek die niet je mediabibliotheek is. Als je later een andere instelling wilt, wil je terug naar het bronbestand en niet naar het bestand dat je al twee keer hebt gecomprimeerd.

Wat er misgaat en waaraan je het merkt

De klachten die ik het vaakst zie zijn steeds dezelfde vier.

• Kleuren kloppen niet. Beelden komen bleek of juist te fel binnen, doordat het kleurprofiel bij het omzetten verkeerd of helemaal niet wordt meegeschreven. Bij foto's uit een camera met een breed kleurprofiel valt het het meest op.
• Sommige bezoekers zien niets. Meestal een cache die de AVIF-versie heeft bewaard en die ook uitlevert aan bezoekers die het formaat niet aankunnen. Je herkent het aan klachten van steeds dezelfde soort apparaten.
• Een deel van je beelden blijft ongemoeid. Achtergrondafbeeldingen uit een paginabouwer komen als opmaak de pagina in, niet als afbeelding. Een plugin die alleen je HTML herschrijft laat die staan, en uitgerekend daar zit vaak het zwaarste beeld van je site.
• Je opslag loopt vol. Drie formaten maal een handvol afmetingen per upload telt hard op. Ruim oude afmetingen op die je thema niet meer gebruikt voordat je een bulkconversie start.

Wat een klein bedrijf hieraan heeft

Afbeeldingen zijn op de meeste bedrijfssites zwaarder dan alle code bij elkaar. Ze bepalen daarmee hoe lang het duurt voordat een bezoeker het grootste beeld op zijn scherm ziet, en dat is een van de waarden waar Google naar kijkt.

Voor een site met tien pagina's en een handvol foto's is het effect klein. Voor een webshop met driehonderd productfoto's of een fotograaf met portfolio is het het verschil tussen een site die op een telefoon lekker doorklikt en een site waar mensen op wachten. Wat er verder bij die mobiele kant komt kijken staat in het artikel over optimaliseren voor mobiel.

Mijn advies voor een gewone bedrijfssite: zet in je beeldplugin AVIF en WebP allebei aan, laat je originelen staan, en besteed de tijd die je overhoudt aan het verkleinen van de afbeeldingen die veel te groot zijn geüpload. Die laatste stap levert bijna altijd meer op dan de keuze van het formaat.

Veelgestelde vragen over avif-afbeeldingen

Wat is een avif-bestand?

Een avif-bestand is een afbeelding die is opgeslagen met de compressietechniek van de AV1-videocodec. Het is bedoeld als opvolger van JPEG en levert bij dezelfde beeldkwaliteit een aanzienlijk kleiner bestand op.

Je herkent het aan de extensie .avif. Het formaat kan daarnaast transparantie en animatie aan, waar je bij de oudere formaten PNG en GIF voor nodig had.

Is avif beter dan webp?

Bij foto's meestal wel, bij schermafdrukken, logo's en hele kleine afbeeldingen vaak niet. AVIF comprimeert foto's zuiniger en kan meer kleurdiepte en HDR aan, maar het coderen duurt veel langer en scherpe randen worden minder goed vastgehouden.

Het praktische antwoord is dat je niet hoeft te kiezen. Vrijwel elke beeldplugin kan beide versies naast je origineel zetten en de browser de eerste laten pakken die hij begrijpt. Wat WebP precies is staat in het artikel over webp.

Welke browsers ondersteunen avif?

Chrome sinds augustus 2020, Firefox sinds oktober 2021, Safari sinds versie 16 in het najaar van 2022 en Edge sinds begin 2024. Daarmee is elke browser die nog updates krijgt gedekt.

Bewegende avif-bestanden kwamen bij Safari pas met versie 16.4, in het voorjaar van 2023. Wie een animatie gebruikt levert daar dus beter nog een tweede versie bij.

Ondersteunt WordPress avif?

Ja, sinds WordPress 6.5 uit het voorjaar van 2024 kun je avif-bestanden uploaden en gebruikt WordPress ze als volwaardig beeldformaat. Daarvoor moet je server wel PHP 8.1 of hoger draaien met een beeldbibliotheek die AVIF kent.

WordPress zet je bestaande afbeeldingen niet zelf om. Daar heb je een plugin voor nodig, of de plugin Modern Image Formats van het prestatieteam van WordPress.

Hoe open ik een avif-bestand op mijn computer?

Op een Mac lukt dat vanaf macOS Ventura gewoon in Voorvertoning, zonder dat je iets installeert. Op Windows heb je een gratis onderdeel uit de Microsoft Store nodig voordat de verkenner een miniatuur toont.

Lukt het allebei niet, sleep het bestand dan naar een tabblad in je browser. Daar opent het altijd.

Hoe zet ik een avif om naar jpeg?

Met Squoosh in je browser, of met een programma als GIMP of ImageMagick op je eigen machine. Je opent het bestand en slaat het op als JPEG.

Houd er rekening mee dat dit een tweede compressieronde is. Er gaat opnieuw kwaliteit af, en het bestand wordt bijna zeker groter dan de AVIF waar je vandaan komt.

Waarom duurt het comprimeren naar avif zo lang?

Omdat de codeerder honderden manieren probeert om elk blokje van het beeld te voorspellen en de zuinigste kiest. Dat zoekwerk kost processortijd, en daar komt het verschil met JPEG vandaan.

Elk programma heeft daarom een snelheidsknop. Zet die hoger als je haast hebt: je bestanden worden dan iets groter, maar de conversie loopt door.

Verliest avif kwaliteit?

In de normale stand wel, net als JPEG en WebP. Er gaat beeldinformatie af die je niet terugkrijgt, alleen kies je zelf hoeveel. Er bestaat daarnaast een stand zonder verlies, maar die levert veel grotere bestanden op.

Waar je het verlies bij AVIF ziet is anders dan bij JPEG. Geen blokjes, maar gladgestreken details in gras, haar, stof en huid. Dat oogt netter en het is wel degelijk informatie die weg is.

Kan avif transparantie aan?

Ja, AVIF heeft een volwaardig alfakanaal, dus een logo of uitgeknipt product zonder achtergrond werkt gewoon. In veel gevallen is het bestand een stuk kleiner dan de PNG die je nu gebruikt.

Bij een logo met vlakke kleuren en scherpe letters is een SVG vaak nog steeds het betere antwoord, want dat blijft op elk formaat scherp.

Waarom worden mijn afbeeldingen niet als avif uitgeleverd?

De vaakst voorkomende oorzaak is dat je server het bestandstype image/avif niet kent, waardoor het bestand als download wordt aangeboden en je een leeg vak ziet. Daarna volgt een cache die de oude versie vasthoudt.

Controleer het in de ontwikkelaarshulpmiddelen van je browser. Onder het tabblad met netwerkverkeer zie je per afbeelding welk bestand er werkelijk binnenkomt en met welk type.

Is avif beter voor SEO?

Niet rechtstreeks. Google rangschikt niet op bestandsformaat, maar wel op hoe snel je pagina bruikbaar is, en daar tellen kleinere afbeeldingen mee. Op een mobiele verbinding is dat effect het grootst.

Het effect is er alleen als je afbeeldingen ook de juiste afmeting hebben. Een AVIF van 4000 pixels breed in een vak van 600 pixels is nog steeds te zwaar.

Moet ik avif gebruiken in mijn nieuwsbrief?

Nee. E-mailprogramma's lopen ver achter op browsers en een deel van je lezers krijgt dan een leeg vak te zien. Gebruik in e-mail gewoon JPEG of PNG.

Datzelfde geldt voor de afbeelding die je meegeeft bij het delen op sociale media. Die wordt door hun eigen programma's opgehaald en die verwachten een klassiek formaat.

Is avif gratis te gebruiken?

Ja. De AV1-codec waar AVIF op leunt is met opzet vrij van licentiekosten neergezet door de Alliance for Open Media. Je betaalt niets, of je nu tien of tienduizend afbeeldingen omzet. Dat is precies het verschil met HEIC, dat technisch veel op AVIF lijkt maar op een codec met patenten rust.

Moet ik overstappen als ik nu alleen jpeg gebruik?

Ja, dat is een van de grootste snelheidswinsten die je met weinig moeite kunt halen. Zet in je beeldplugin de conversie aan, laat je originelen staan en laat de plugin een terugvaloptie meeleveren.

Doe het wel in porties als je een grote mediabibliotheek hebt. Een conversie van duizenden foto's in één keer kan je server een uur bezet houden, en bij goedkope hosting loopt zo'n opdracht halverwege vast.