PNG naar AVIF omzetten

PNG is exact en duur. Het gooit nooit een beeldpunt weg, wat het de juiste keuze maakt voor een logo of een schermafbeelding, en waarom een pagina met twintig ervan zwaar genoeg is voor een prestatierapport om over te klagen.

AVIF pakt dat van de andere kant aan. Het stamt af van een moderne videocodec, en past die machinerie toe op één enkel beeld — wat waarom het vaak op de helft van de PNG-omvang landt of beter voor een foto, een echt alfakanaal houdt, en er bij normale kijkgrootte hetzelfde uitziet. Op een pagina met productfoto's is dat het verschil tussen een trage eerste indruk en een snelle.

De meeste mensen die hier komen zijn al naar WebP overgestapt en vragen zich af of de volgende stap de moeite waard is. Bij foto's meestal wel: bij vergelijkbare kwaliteit komt AVIF vaak nog eens twintig tot dertig procent onder WebP uit, en het gaat merkbaar beter om met verlopen en gladde luchten, met minder banding.

Op de andere helft van het web draait het antwoord om. Vlakke interfacegrafiek, iconen, grafieken en schermafbeeldingen — de dingen waar PNG eigenlijk voor bedacht is — comprimeren al zo goed dat AVIF soms een groter bestand oplevert dan WebP. Zet vijf representatieve eigen afbeeldingen om en vergelijk de bytetellingen. Het kost tien minuten en klopt beter dan elke algemene regel, deze inbegrepen.

AVIF-codering doet veel meer werk dan PNG- of WebP-codering. Het zoekt veel harder naar structuur die het compact kan beschrijven, en dat zoeken kost tijd — reken op een merkbare pauze per bestand, en enkele seconden voor een grote foto, zelfs op een snelle machine.

De kosten worden eenmalig betaald, op je eigen computer, op het moment van omzetten. Elke bezoeker daarna downloadt een kleiner bestand. Dat is een goede deal voor site-assets en een slechte voor iets dat je nu meteen omgezet nodig hebt, wat de moeite waard is om te bedenken als je tweehonderd bestanden sleept en koffie gaat halen.

AVIF draagt een echt alfakanaal, dus de transparantie die het beeld tot een PNG dwong is geen reden om te blijven. Een uitgesneden productfoto, een icoon met afgeronde hoeken, een logo dat op elke achtergrondkleur moet passen — alles zet om zonder vulkleur te kiezen en zonder halo rond de randen.

Dit is het belangrijkste praktische verschil met omzetten naar JPG, waar transparantie weggegooid en vervangen moet worden, en waarom AVIF PNG over een hele assetmap kan vervangen in plaats van alleen in de fotografische delen ervan.

De standaardwaarde zit op een niveau waar het verschil met de PNG bij normale kijkgrootte onzichtbaar is terwijl het bestand een fractie van de omvang heeft. Voor foto's, schermafbeeldingen en algemene site-afbeeldingen laat je hem daar staan.

Zet hem hoger voor beelden die worden ingezoomd, of die fijne tekst of dunne lijnen van één pixel dragen, waar agressieve compressie het makkelijkst opvalt. Zet hem lager voor grote decoratieve achtergronden waar niemand van dichtbij naar kijkt. Het enige om te vermijden is het omgezette bestand als master behandelen — bewaar de PNG, want kwaliteit die is weggegeven kan niet worden teruggewonnen door terug te converteren.

Browserondersteuning is al jaren niet het probleem: Chrome, Edge, Firefox, Safari en de mobiele browsers tonen allemaal AVIF. Gaat het beeld op een webpagina, dan wordt het gezien.

De mislukkingen zitten elders. Desktop-beeldviewers, oudere telefoongalerijen, chattoepassingen, e-mailclients en heel wat uploadformulieren van contentbeheersystemen herkennen het formaat nog steeds niet. Mail niemand een AVIF en gebruik het niet als het bestand dat een klant downloadt — stuur daarvoor de JPG of de PNG. AVIF is een afleverformaat voor webpagina's, geen algemeen formaat.

Het standaardpatroon is een picture-element met meerdere bronnen: AVIF eerst, WebP daarna, en de originele PNG of JPG als img-terugval. Elke browser neemt het eerste formaat dat hij begrijpt en iedereen krijgt een werkende afbeelding, dus hoeft niets namens de bezoeker beslist te worden.

Dit werkt alleen als je de originelen bewaart. Zet een kopie van je assetmap om in plaats van hem ter plekke te vervangen, en houd de PNG's in versiebeheer — ze zijn ook de bron waar het volgende formaat uit gegenereerd wordt, wanneer dat ook aankomt.

Sleep de hele map naar binnen. Elk bestand zet om op je eigen machine met zijn eigen voortgang, houdt zijn bestandsnaam met verwisselde extensie, en alles komt terug als één ZIP klaar om in de build te zetten.

Omdat er niets geüpload wordt, is er geen wachtrij, geen wachttijd per bestand en geen daglimiet — wat hier meer telt dan bij de meeste omzettingen, want AVIF-codering is het trage deel en een gehoste dienst zou je die tijd op iemand anders' processor laten betalen.