Notities van het team over vakmanschap, formaten en de kleine beslissingen achter een goed resultaat.
Waarom AVIF foto's beter aanpakt dan WebP
Het compressievoordeel van AVIF op WebP komt van de onderliggende formato. WebP gebruikt de -intra-frame-motor, bedoeld voor video maar sinds 2010 ingezet voor stilstaande beelden. een modern formaat, de formato achter AVIF, kwam in 2018 na jaren onderzoek dat recht op de grenzen van en mikte. een modern formaat past agressievere toe, fijnere blokverdeling tot 4 bij 4 pixels en een effectievere. Het praktische resultaat, bevestigd door -analyse op grote fototestsets, is dat AVIF bij foto's meestal 20 tot 30 procent kleiner is dan WebP bij dezelfde waargenomen kwaliteit. Bij computergemaakte graphics met vlakke kleur en harde randen krimpt het verschil, omdat het eenvoudiger algoritme van WebP die patronen efficiënt aanpakt. Voor elke pagina waarvan de zwaarste inhoud foto's zijn, heeft de AVIF-stap meetbaar effect op de bandbreedte.
De tweede lossy ronde in de praktijk
Wanneer je een WebP omzet naar AVIF, zijn zowel bron als uitvoer lossy. De WebP besliste al bij het eerste maken welke kleurinformatie wordt weggegooid, en die keuzes liggen vast: omzetten naar AVIF kan er niets van terughalen. De AVIF-omzetting maakt dan haar eigen keuzes over de ontvangen pixeldata, op kwaliteit 85. Bij foto's is het gecombineerde effect van twee lossy rondes bij gangbare weergavegroottes nog visueel vrijwel verliesvrij en meet rond op echt fotomateriaal. Bij graphics die hun WebP-opslag al had aangetast, kan de tweede ronde zichtbare artefacten versterken. De praktische regel: oogt de bron-WebP schoon op de weergavegrootte die je plant, dan oogt de AVIF dat ook. Toont de WebP al compressieruis, bekijk de AVIF dan zorgvuldig voor je hem verstuurt.
Hoe het transparantielaag erdoorheen loopt
Zowel WebP als AVIF bewaren transparantie als een apart transparantievlak naast de kleurdata. De omzetting leest het transparantielaag van de WebP, stelt het samen op volle transparantie en geeft het door aan de AVIF-omzetting, die haar eigen transparantiespoor schrijft met een modern formaat op kwaliteit 85. Zachte transparantieverlopen, uitgefranste randen en deels doorzichtige zones overleven deze heen-en-terugweg. Het AVIF-transparantievlak is op kwaliteit 85 zelf lossy, wat bij extreme inzoom aan harde randen een nauwelijks merkbare franje kan geven. Bij normale webgroottes is het verschil met de bron niet zichtbaar. Voor pixelnauwkeurig werk aan kleine pictogrammen waar de transparantierand exact moet zijn, houd je de WebP-bron en controleer je de uitvoer op volle inzoom voor je hem verstuurt.
Snelheidsverwachtingen per browser en apparaat
De AVIF-opwarming gebeurt eenmaal per browsersessie en voegt ongeveer een seconde toe aan de eerste omzetting. Daarna geeft Chromium de beste doorvoer: rond 40 milliseconden voor een miniatuur van 0,12 megapixel, 250 milliseconden voor een foto van 1 megapixel, 2,8 seconden voor een 4K-foto en 25 seconden voor een volledig 48-megapixelbeeld in het slechtst waargenomen geval. Firefox is de opvallende uitschieter en loopt dezelfde routine ongeveer vier keer trager, wat het 4K-geval bij 31 seconden brengt en grote bestanden over twee minuten. WebKit ligt tussen beide, dichter bij Chromium. Mobiele hardware loopt over alle motoren heen 3 tot 5 keer trager dan de desktop. Voor routineomzetting bestand voor bestand is Chrome op een laptop of desktop het praktische gereedschap. Voor Firefox-gebruikers met grote beelden is het eerlijke advies van browser te wisselen of bij WebP te blijven.
Core Web Vitals en de AVIF-stap
Pagina's die foto's leveren, betalen bandbreedte voor elk geladen beeld. Zijn die beelden nu WebP, dan snijdt omzetten naar AVIF de overdracht per beeld bij foto's met zo'n 20 tot 30 procent. Op een pagina met een WebP-heldbeeld van brengt AVIF dat naar zo'n noticeably smaller. Op een productraster met twaalf WebP-miniaturen van bespaart AVIF zo'n noticeably smaller totaalgewicht. Die besparingen werken rechtstreeks door op Largest Contentful Paint wanneer het LCP-element een beeld is. Met AVIF-ondersteuning rond 94 procent wereldwijd dekt een picture-element dat eerst AVIF met een WebP-terugval levert vrijwel al het verkeer. De markupkost wordt eenmaal per beeldcomponent betaald, en de bandbreedtewinst herhaalt zich daarna bij elke paginalading.
Waarom AVIF-omzetting op een server leunt
AVIF bouwt voort op de een modern formaat, dezelfde familie als moderne video, en is bewust zwaar om te maken in ruil voor compacte bestanden. Dat werk goed doen, vooral op grote foto's, gaat op een echte server veel sneller en betrouwbaarder dan in de browser van een telefoon, dus dit paar stuurt de afbeelding naar onze server om de best mogelijke AVIF te maken. Het bestand wordt verwerkt en het resultaat komt naar je terug, en de download wordt binnen ongeveer 2 uur verwijderd, zonder persoonlijke gegevens en zonder langdurige opslag. Meerdere afbeeldingen tegelijk omzetten draait altijd op de server, die de afgewerkte set tot één download samenstelt, binnen dezelfde korte tijd gewist. Is onze server niet bereikbaar, dan wordt een losse omzetting in plaats daarvan in de browser gemaakt, dat bestand blijft lokaal, en neemt voor het gemak een tragere verwerking voor lief. De ruil is duidelijk: de server koopt kwaliteit en tempo op het formaat dat het het hardst nodig heeft, en je bestand wordt nooit langer bewaard dan het korte venster van de omzetting.
