Beeldformaat AVIF voor websites verbetert SEO, PageSpeed & gebruikerservaring.

Minder dan 0,1 procent van alle websites maakt gebruik van het AVIF-formaat en benutten de beste mogelijkheid voor beelddragers voor meetbare verbetering van de websitesnelheid, de gebruikerservaring en de online zichtbaarheid in Google. Alle andere websitebeheerders benutten nog niet het potentieel dat het AVIF-formaat als beelddrager biedt. Dit artikel is bedoeld om hierin te voorzien en je aan te moedigen om serieus te kijken naar het AVIF-formaat en het indien mogelijk ook te gebruiken voor de afbeeldingen op je website.

Heb je al eens de URL van je website getest met Google PageSpeed Insights, om te zien hoe het zit met jouw prestaties? Zo niet, test het dan direct met je eigen website.

Laten we raden, je zult deze waarde helaas nog niet te zien krijgen bij jouw website, toch?

Hoe lager jouw waarde is, des te meer optimalisatie jouw website nodig heeft om jouw PageSpeed te verbeteren. Als je verder naar beneden scrolt op de testtoolpagina en de aanbevelingen voor verbetering van jouw PageSpeed van Google opent, kan het goed zijn dat er een punt staat over moderne beeldformaten - en dat is wanneer je nog steeds JPG- of PNG-bestanden gebruikt voor jouw afbeeldingen.

Dit is een van de redenen waarom je nog geen topscores behaalt bij de PageSpeed Insights met jouw website en waarschijnlijk ook niet voldoet aan de Core Web Vitals.

Zowel de afbeeldingen op onze bedrijfswebsite 4eck-media.de als hier op TutKit.com worden geladen in het AVIF-bestandsformaat - razendsnel, ultraklein in een overtuigende kwaliteit. En AVIF helpt ons om een zo hoog mogelijke PageSpeed te behalen.

Het relatief nieuwe bestandsformaat voor webafbeeldingen is nog vrij onbekend, daarom wordt het tijd om hier eens het moderne beeldformaat AVIF voor websites met al zijn voordelen voor SEO, PageSpeed en gebruikerservaring te introduceren.

De inhoudsopgave voor het AVIF-artikel:

Wat is het AVIF-beeldformaat?

AVIF is een nieuw beeldformaat dat in 2020 werd gepubliceerd door de Alliance for Open Media (AOMedia). Het formaat is gebaseerd op het verliesloze compressiealgoritme AV1 en biedt verschillende voordelen ten opzichte van andere gangbare beeldformaten zoals JPEG, PNG en het webformaat WebP.

AVIF-afbeeldingen zijn aanzienlijk kleiner dan JPEG-afbeeldingen bij dezelfde beeldkwaliteit. Dit komt doordat AV1 een aanzienlijk efficiëntere compressie biedt. Zo kan een AVIF-afbeelding met dezelfde beeldkwaliteit als een JPEG-afbeelding vaak tot wel 50 procent kleiner zijn.

AVIF-afbeeldingen bieden ook een hoger kleurdiepte dan JPEG-afbeeldingen. Zo kunnen AVIF-afbeeldingen tot 12-bits kleurdiepte opslaan, terwijl JPEG-afbeeldingen slechts 8-bits kleurdiepte ondersteunen. Dit leidt tot een groter kleurbereik en realistischere kleuren in AVIF-afbeeldingen.

Bovendien zijn AVIF-afbeeldingen in staat om alfakanalen op te slaan. Alfakanalen worden gebruikt om de transparantie van afbeeldingen te definiëren. Dit maakt AVIF-afbeeldingen ideaal voor gebruik in grafische toepassingen waar transparantie vereist is.

AVIF is een open-source formaat en wordt ondersteund door een verscheidenheid aan software- en hardwareleveranciers. De meeste gangbare beeldbewerkingsprogramma's en browsers ondersteunen al AVIF-afbeeldingen. Juist daarom is het tijd dat dit moderne beeldformaat zich verspreidt!

Enkele voordelen van AVIF ten opzichte van andere gangbare beeldformaten zijn:

• Betere compressieverhoudingen: AVIF-afbeeldingen zijn aanzienlijk kleiner dan JPEG- en PNG-afbeeldingen bij dezelfde beeldkwaliteit.
• Hogere kleurdiepte: AVIF-afbeeldingen ondersteunen tot 12-bits kleurdiepte, terwijl JPEG- en PNG-afbeeldingen slechts 8-bits kleurdiepte ondersteunen.
• Ondersteuning voor alfakanalen: AVIF-afbeeldingen kunnen transparantie opslaan, waardoor ze de reden vervangen waarom vandaag de dag nog steeds PNG- of WebP-afbeeldingen in websites worden gebruikt.
• Open-source formaat: AVIF is een open-source formaat en wordt ondersteund door een verscheidenheid aan software- en hardwareleveranciers.
• AVIF is een overtuigend beeldformaat voor websites dat veel voordelen biedt ten opzichte van andere gangbare formaten (inclusief WEBP).

Er wordt verwacht dat AVIF in de toekomst een steeds grotere rol zal spelen bij het opslaan en weergeven van afbeeldingen op websites - vooral omdat Google het gebruik direct in de aanbevelingen plaatst bij de resultaten van de PageSpeed Insights en inmiddels alle gangbare browsers AVIF ondersteunen in de nieuwere versies.

Daarom loont het om er vroeg bij te zijn bij de implementatie op je eigen website, om nu al te profiteren van de voordelen voor SEO, PageSpeed en gebruikerservaring.

Waarom is AVIF voordelig voor SEO, PageSpeed en gebruikerservaring?

Het grootste voordeel wordt het meest zichtbaar wanneer we de afbeeldingen vergelijken in de weergave. Als voorbeeld heb ik een afbeelding van Midjourney van een school Clownvissen gegenereerd in de resolutie 1024x1024 in PNG-formaat.

• Originele PNG: 1,43 MB
• Geoptimaliseerd via TinyPNG: 393 KB - 73% bespaard

De oorspronkelijke PNG-bestand heb ik toen laten converteren via squoosh.app met als resultaat:

• Geoptimaliseerd via Squoosh als WebP: 84 kb - 94 procent bespaard
• Geoptimaliseerd via Squoosh als AVIF: 42 kb - 97 procent bespaard

Als resultaat is de AVIF-afbeelding bij dezelfde optische kwaliteit slechts half zo groot als de WebP-afbeelding. In veel andere tests is gebleken dat compressieartefacten, zoals die optreden bij te hoge compressie van JPG-bestanden, pas licht zichtbaar worden wanneer de kwaliteit onder 30 in de richting van 20 of lager wordt geregeld. Bij kwaliteit 30 blijven zelfs tekstgedeelten in pixelafbeeldingen nog steeds mooi scherp zonder compressieartefacten.

Zulke besparingen bij op afbeeldingen gebaseerde websites kunnen niet genoeg worden gewaardeerd.

AVIF voor betere SEO-waarden, PageSpeed en gebruikerservaring

Google heeft al in 2021 de vitale kernwaarden (Core Web Vitals) van een website tot een rankingfactor gemaakt. Hieronder vallen bijvoorbeeld de laadsnelheid, dus de waarde hoe snel de hoofdinhoud voor jouw gebruiker wordt geladen. Google geeft aan dat tijden tot 2,5 seconden een goede waarde zijn die website-eigenaren moeten nastreven voor hun gebruikers.

Grotere afbeeldingsbestanden veroorzaken langere laadtijden. De Core Web Vitals worden dan als mislukt beschouwd.

Bovendien is er nog een ander probleemgeval. Als grotere afbeeldingsbestanden, die bijvoorbeeld gebaseerd zijn op PNG of JPEG, op de website zijn geplaatst, kan het zijn dat tekstinhoud al is geladen terwijl een afbeelding langzamer wordt opgebouwd. Dit kan leiden tot zogenaamde cumulatieve lay-outverschuivingen, kleine verschuivingen die met de weergave van een afbeelding de onderste delen van de website naar beneden drukken, waar ze ook thuishoren. Zulke cumulatieve lay-outverschuivingen zijn niet naar de zin van Google en worden gedefinieerd als CLS-fouten, die ertoe leiden dat de Core Web Vitals ook als mislukt worden beschouwd.

Bovendien voelt het voor elke websitebezoeker gewoon geweldig als de pagina's snel laden en de inhoud direct klaar staat met een klik. Bovendien kun je afbeeldingen van betere kwaliteit op de website plaatsen zonder de compressie zo ver door te voeren dat er al compressieartefacten te zien zijn. Het AVIF-formaat verbetert dus de gebruikerservaring van elke gebruiker vanuit meerdere aspecten. Google dwingt ons dus om met het slagen voor de Core Web Vitals iets te doen voor onze bezoekers, zodat ze niet gefrustreerd raken bij het bezoeken van onze website.

Zo kun je iets doen om de gebruikerservaring, de paginasnelheid en de technische kwaliteit van je website te verbeteren, wat zich allemaal positief zal vertalen in je online zichtbaarheid.

Ondersteuning van browsers voor AVIF-afbeeldingen

Vooral als het gaat om gloednieuwe technieken, zijn veel website-eigenaren een beetje terughoudend en wachten ze graag nog een paar maanden. Enerzijds willen ze geen bètatester worden voor grote releases van bijvoorbeeld winkelsystemen of CMS-systemen, anderzijds is het nooit zeker dat er geen problemen zullen zijn met bepaalde browsers of apparaten.

Wat betreft het AVIF-beeldformaat, is het eigenlijk doorslaggevend of de populaire browsers het formaat inmiddels ondersteunen. De website caniuse.com geeft hierover informatie: https://caniuse.com/avif

AVIF wordt al ondersteund door bijna 85% van de wereldwijde browsers. In Duitsland is dat met ingang van 2 september altijd 80,33% ... nou ja, Duitsland, waar nog steeds hiaten in het mobiele netwerk tot de realiteit behoren en sommige regio's nog steeds te lijden hebben onder traag internet (waaronder mijn eigen regio: terwijl ik op kantoor met gigabit werk, ontvang ik maar 9 Mbit/sec tijdens het thuiswerken).

Je ziet dus dat AVIF al geruime tijd wordt ondersteund in de belangrijkste browsers.

Hoeveel websites maken al gebruik van het AVIF-formaat?

Vergelijkbaar met caniuse.com geeft w3tech.com statistieken over het gebruik van bepaalde technologieën. Zo ook voor gebruikte beeldformaten op websites.

Zo'n percentage van alle websites maakt (met ingang van september 2023) gebruik van:

• PNG: 82,1%
• JPEG: 78%
• SVG: 55,2%
• GIF: 21,7%
• WebP: 9,2%
• ICO en BMP: elk 0,2%
• AVIF: 0,1% (afgerond)
  

Op dit moment maakt dus minder dan 0,07 procent van alle websites gebruik van het AVIF-formaat. Whaaat? Dat is echt belachelijk weinig. Maar hey, het is een kans voor jou om de technologische voorhoede te worden bij het gebruik van moderne beeldformaten. Aan de curve in de afbeelding aan de rechterkant wordt al duidelijk dat het gebruik maand na maand toeneemt ... nog steeds in promille. Dit zal waarschijnlijk snel gaan versnellen.

Interessant is dat niet eens 10 procent van alle websites de aanbeveling van Google voor moderne webformaten volgt. Alle anderen maken concessies aan PageSpeed en gebruikerservaring en zullen vermoedelijk ook niet aan de Core Web Vitals voldoen, wat een negatieve invloed kan hebben op de online zichtbaarheid.

AVIF vs. WebP - wat is beter voor jouw website?

Laten we eens een directe test doen ter illustratie. De afbeelding rechts uit het hoofdgebied van TutKit.com had voor de conversie naar AVIF als PNG-bestand meer dan 600 KB vanwege de transparanties.

Het wordt nu uitgevoerd als een WebP-bestand van 159 KB (ons fallback-optie!). Zelfs als dit nu wordt geoptimaliseerd via een tool zoals TINYPNG, dat ook WebP-bestanden kan verkleinen, blijven we op 128 KB. Nog steeds 20 procent verminderd.

Als AVIF-bestand, dat bij ons standaard wordt weergegeven, heeft de afbeelding slechts 94 KB, dus slechts 59 procent van de grootte van de fallback-WebP. In alle tests kon AVIF het WebP-formaat verslaan qua bestandsgrootte met behoud van dezelfde optische kwaliteit.

Welke redenen pleiten voor AVIF in plaats van WebP?

• AVIF kan transparanties bevatten en behoudt bij een hogere compressie en lagere bestandsgrootte toch een betere beeldkwaliteit.
• De ondersteuning is met bijna 85% voor AVIF al gegeven in alle gangbare browsers. Dit percentage zal verder stijgen.
• Je website zal sneller laden dankzij AVIF in vergelijking met WebP. Vooral bij beeldrijke websites zoals online winkels met categoriepagina's waar veel productafbeeldingen staan, is dit een voordeel. Ook bij websites waar de afbeeldingen van hoge kwaliteit moeten worden getoond (portfolio-websites, referenties, enz.), zorg je voor een hoge visuele kwaliteit bij een lagere bestandsgrootte.

Ook is er een hint van wat caniuse.com direct op de WebP-pagina schrijft: “AVIF en JPEG XL zijn ontworpen om WebP te vervangen.” AVIF en JPEG XL zouden WebP moeten vervangen.

Voordat je je afvraagt of je misschien op het verkeerde paard wedt met AVIF, omdat JPEG XL ook waarschijnlijk meedoet aan de race, kan ik je meteen geruststellen. De browsercompatibiliteit met JPEG XL is met 0,08 procent praktisch niet bestaand.

In Squoosh kun je al afbeeldingen converteren naar JPEG XL en het heeft “slechts” vergelijkbare waarden als WebP (zie afbeelding hieronder).

AVIF blijft de winnaar op het gebied van formaten. Maak er snel gebruik van en profiteer van alle voordelen voor jouw websites!

Squoosh.app - de beste tool voor het converteren van JPG, PNG, WebP naar AVIF

Terwijl we vroeger in het team TinyJPG of TinyPNG als online tool hebben gebruikt om JPG-, PNG- of WebP-bestanden te optimaliseren voor gebruik op websites, ben ik nu een grote fan van Squoosh van Google.

Squoosh is een gratis beeldconverter die is ontwikkeld door Google. De tool werkt als een onlinedienst, maar ook lokaal op je computer of server (node.js!). Het kan afbeeldingen converteren naar verschillende formaten, waaronder JPEG, PNG, GIF en WebP. En het beste: het kan je afbeeldingen ook converteren naar het AVIF-formaat.

De beeldconverter Squoosh maakt gebruik van verschillende technieken om de bestandsgrootte te verkleinen zonder de kwaliteit te beïnvloeden. Dit omvat het comprimeren van kleurgegevens, het verlagen van de resolutie en het verwijderen van overbodige gegevens.

Je hoeft alleen maar een afbeelding erin te slepen en het gewenste formaat in te stellen. Met weinig klikken is je afbeelding geconverteerd en geoptimaliseerd.

Zo ziet het eruit wanneer je een WebP-afbeelding invoegt en deze een keer als AVIF (links) en als JPEG XL (rechts) voor conversie en compressie maakt. Met de schuifregelaar kun je ook vergelijken welk kwaliteitsniveau juist is, zodat de zichtbare kwaliteit behouden blijft. In de standaardinstelling is één kant altijd het originele bestand voor vergelijking. Dus volledige controle over het resultaat.

Gebruik ook Squoosh voor het beheren van je content en webontwikkeling om de grootte van je afbeeldingen te verkleinen dankzij moderne webformaten zoals WebP of AVIF, en om de laadtijden van je websites te verbeteren. Je kunt ook je JPG-bestanden - vergelijkbaar met TinyJPG - verkleinen in bestandsgrootte als je ze bijvoorbeeld op sociale media wilt uploaden. Het voordeel ten opzichte van TinyJPG is dat je volledige controle over de compressie hebt en met verschillende optimalisatie-instellingen kunt experimenteren om de beste kwaliteit te behalen bij de kleinst mogelijke grootte.

Hier zijn enkele voordelen van Squoosh:

• Ondersteunt een verscheidenheid aan beeldformaten waarin kan worden geconverteerd 
• Gebruikt een verscheidenheid aan technieken om de bestandsgrootte van afbeeldingen te verkleinen.
• Biedt een voorbeeld van gecomprimeerde afbeeldingen
• Biedt een reeks optimalisatie-instellingen
• De tool is gratis en gemakkelijk te gebruiken.

Een minpunt bij alle positieve eigenschappen: momenteel kan Squoosh slechts één afbeelding tegelijk bewerken en ondersteunt geen batchverwerking. Ik hoop dat deze functie nog komt.

Server-side batchconversie in PHP-frameworks van afbeeldingen van JPG en PNG naar AVIF en WebP

Wij hebben hier op TutKit.com onze afbeeldingen, die als JPG- en PNG-bestanden in het portaal stonden - op zijn minst meer dan 14.000 afzonderlijke bestanden - server-side geconverteerd naar het AVIF-formaat en als fallback voor oudere browsers ook naar het WebP-formaat. We hebben dit zo opgelost dat onze redacteuren nog steeds afbeeldingen kunnen blijven uploaden in JPG of PNG, zoals onze ontwerpers gewend zijn, en deze kunnen voorzien van metagegevens in het portaal. Het systeem voert automatisch de integratie in AVIF uit en als fallback voor alle oudere (of niet-ondersteunende) browsers de weergave in WebP.

Voor een goede werking aan de serverzijde, vertrouw op de nieuwste softwareversies. De nieuwe functies imagecreatefromavif en imageavif voor het AVIF-formaat zijn alleen beschikbaar vanaf PHP 8.1+ en als de GD-extensie met AVIF-ondersteuning is gebouwd. Het vereist libavif versie 0.8.2 of hoger.

Zorg ook voor de compatibiliteit met de besturingssystemen. AVIF wordt geleverd met de libavif-dev/libavif-devel-pakketten in de repositories:

• vanaf Ubuntu 21.04  
• vanaf Debian 11 
• vanaf Alpine 3.13 
• vanaf Fedora 34

Hier is de PageSpeed-evaluatie voor de mobiele weergave van TutKit.com. Terwijl je bij desktop nog relatief eenvoudig een score boven de 90 kunt behalen, is dit voor mobiele weergaven echt uitdagend. We blijven eraan werken om deze score verder richting de 100 te verbeteren, omdat we weten: PageSpeed is goed voor de gebruikerservaring en draagt daarmee ook bij aan onze SEO-successen.

Wat hier zo gemakkelijk klinkt met de integratie van AVIF hier in ons PHP-framework Laravel, resulteerde echter uiteindelijk in meer dan 60 tickets in onze JIRA-tool die verband hielden met de conversie en integratie (inclusief onderzoek, ontwikkeling, bugfixing, testen). Dus terwijl plugins het werk in een klassiek CMS zoals WordPress aanzienlijk verminderen, kan het bij uitgebreide individuele ontwikkeling ook wel eens - zoals bij ons - drie weken tijd kosten. De voordelen van het gebruik van AVIF zijn het zeker waard! 

Terloops: Misschien schrijf ik binnenkort ook eens een artikel over waarom we bij platforms zoals TutKit.com liever een PHP-framework gebruiken in plaats van WordPress of andere CMS.

Plugins voor het gebruik van AVIF in WordPress

Het CMS WordPress ondersteunt vanaf september 2023 de standaard upload van AVIF-afbeeldingen niet - in tegenstelling tot bijvoorbeeld CMS Contao, dat AVIF ondersteunt sinds versie 5.0.0. Daarom moet je momenteel nog twee stappen volgen bij het gebruik van WordPress om je afbeeldingen in AVIF te kunnen weergeven.

1. AVIF-support voor WordPress instellen
2. Conversie van afbeeldingen van JPG/PNG/WEBP naar AVIF

Er zijn verschillende WordPress-plugins die het gebruik van AVIF-afbeeldingen op WordPress-websites mogelijk maken. Hier zijn drie plugins die je kunt bekijken: 

• AVIF Support: Deze plugin maakt de upload en weergave van AVIF-afbeeldingen in WordPress-websites mogelijk. Het ondersteunt ook de automatische conversie van JPEG- en PNG-afbeeldingen naar AVIF-afbeeldingen.
• Converter for Media: Deze plugin converteert alle afbeeldingen in je WordPress Media-bibliotheek naar AVIF-afbeeldingen. Het biedt ook een reeks opties om de beeldkwaliteit en compressieratio aan te passen.
• ShortPixel Image Optimizer: Deze plugin optimaliseert afbeeldingen in je WordPress Media-bibliotheek, inclusief de conversie naar AVIF-afbeeldingen. Het biedt ook een reeks andere functies om de beeldkwaliteit en -prestaties te verbeteren.

Deze plugins zijn een goede manier om de voordelen van AVIF-afbeeldingen op WordPress-websites te benutten.

Hier vind je de AVIF-Support-Plugin - op dit moment heeft het echter slechts 1.956 downloads en minder dan 800 installaties - je ziet, AVIF is nog volledig onbekend voor WordPress-gebruikers.

UPDATE 05.04.2024: Met WordPress 6.5 ondersteunt WordPress eindelijk ook AVIF! Daarom zijn support-plugins alleen nog nodig voor oudere versies van WordPress. Des te meer loont het de moeite om te updaten naar WordPress 6.5 en hoger.

De Plugin Local Image Sharp voor Strapi-websites

Wij gebruiken zelf ook AVIF op onze agentschapssite 4eck-media.de, gebaseerd op node.js met het Strapi CMS. De Local Image Sharp Plugin voor Strapi maakt het gebruik van AVIF-afbeeldingen op Strapi-websites mogelijk. De plugin maakt gebruik van het sharp Image Processing Toolkit om afbeeldingen te converteren naar AVIF-afbeeldingen.

De Local Image Sharp Plugin biedt een aantal functies, waaronder:

• Automatische conversie van afbeeldingen naar AVIF-afbeeldingen
• Aanpassing van de beeldkwaliteit en compressieverhouding
• Ondersteuning voor verschillende beeldformaten

Om de plugin te installeren, download je hem uit de Strapi Plugin Store en installeer je hem zoals elke andere Strapi-plugin.

We hebben het zo opgezet dat we de afbeeldingen nog steeds als JPG of PNG in het Strapi-systeem uploaden. Het systeem converteert de afbeeldingen naar AVIF en WEBP in zes verschillende resoluties, zodat de juist gedimensioneerde afbeeldingen afhankelijk van het apparaat (desktop, tablet, mobiel) als AVIF in de browser worden weergegeven. Voor oudere browsers hebben we ook hier een fallback-oplossing met WebP-afbeeldingen die dan worden weergegeven. 

Gebruik bij voorkeur de <picture>-tag, die dan een <source>- en <img>-tag bevat, om je afbeeldingen in de juiste afmeting en in beide formaten AVIF en WebP met de bron van JPEG of PNG weer te geven.

De afbeeldingen in het moderne webformaat waren naast caching een van de belangrijkste boosters voor een geweldige prestatie van onze agentschapssite:

Opmerking over meta-thumbnails en gestructureerde gegevens

Aangezien Google Afbeeldingen tot op heden het AVIF-formaat niet ondersteunen, vermelden we als Schema-Markup "image": nog steeds het bijbehorende JPG-bestand. Ook de meta-thumbnail die we op elke productpagina vermelden om Google een voorbeeldafbeelding aan te bieden voor het zoekfragment, bevat nog steeds het JPG-formaat.

Beter voorkomen dan genezen. In de forums is al gerapporteerd dat iemand meldde dat de volledige online zichtbaarheid van de afbeeldingen verdwenen was na de overstap naar AVIF. Deze ervaring kunnen wij niet bevestigen. Onze online zichtbaarheid is constant gebleven, maar het aantal crawling-verzoeken van de Googlebot voor afbeeldingen is toegenomen. Interessant is dat we zien dat de Googlebot door de WebP-afbeeldingen crawlt, die in de broncode als fallback klaarstaan voor oudere browsers. Google lijkt de WebP-afbeeldingen momenteel dus te crawlen voor de index.

Daarom zou mijn aanbeveling zijn om ook nog de JPG-bron te gebruiken in de metagegevens voor de miniaturen en ook voor de gestructureerde gegevens.

Tools en software voor het bewerken van AVIF-afbeeldingen

Afbeeldingen worden vaak en graag bewerkt, dus compatibiliteit met het AVIF-formaat is natuurlijk wenselijk bij de gangbare beeldbewerkingsprogramma's. Soms download je een bestaande afbeelding van de website om een wijziging aan te brengen. Dan is het handig als je favoriete beeldbewerkingsprogramma het ook kan openen, wat de belangrijkste functie betekent bij de AVIF-compatibiliteit. Zelfs als het vervolgens in een ander formaat wordt opgeslagen, kan het weer worden geconverteerd naar het AVIF-formaat via Squoosh of andere tools.

Hier is een lijst met beeldbewerkingssoftware voor AVIF-compatibiliteit (op basis van september 2023):

• Gimp: Kan AVIF importeren, bewerken en exporteren vanaf versie 2.10.22.
• Photopea: kan AVIF importeren en bewerken, maar niet exporteren. Opslaan in een ander bestandsformaat is dan mogelijk.
• Affinity Photo: geen ondersteuning voor AVIF
• Photoshop: geen ondersteuning, maar een plugin kan helpen, waardoor de compatibiliteit tot stand wordt gebracht.

AVIF-Plugin voor Photoshop

Hier vind je een plugin waarmee je Photoshop in staat stelt om ook AVIF-bestanden te openen.
https://github.com/0xC0000054/avif-format

De download is mogelijk op het tabblad Releases van de pagina.

Als je het ZIP-bestand hebt gedownload, plaats dan de Av1Image.8bi in de map waar Photoshop naar plug-ins zoekt. Bij standaardinstallaties is dat deze map:
C:\Program Files\Common Files\Adobe\Plug-ins\CC

Of deze map: C:\Program Files\Adobe\Photoshop [versie]\Plug-ins

Sluit Photoshop. Start dan Photoshop opnieuw, zodat de plug-in kan laden. Daarna kun je AVIF-bestanden rechtstreeks in Photoshop openen via slepen en neerzetten of de openen dialoog.

AVIF-afbeeldingen bekijken in Windows

Als ik afbeeldingen van een website download omdat ik ze wil bewerken of op een andere manier nodig heb, wil ik natuurlijk dat de bestandsverkenner deze kan openen en weergeven.

Vanaf Windows 10 is het mogelijk, maar daarvoor is een extensie vereist. Als je op een AVIF-bestand klikt, krijg je eerst een foutmelding.

In de foutmelding staat een link. Als je hierop klikt, kom je op de Microsoft Store voor de AVIF-extensie. Download deze. Het is slechts 1,61 MB groot.

Daarna kun je afbeeldingen in AVIF-formaat ook onder Windows in je bestandsverkenner openen en bekijken.

In plaats van GIF-animaties liever AVIF-animaties op websites opnemen

Er is een online converter beschikbaar om GIF-animaties om te zetten in AVIF-animaties. https://mconverter.eu/convert/gif/avif/

Terwijl mijn test-GIF 787 KB groot is, wordt de animatie als AVIF verkleind tot 411 KB.

Mijn persoonlijke conclusie

Naar mijn mening is AVIF de beste optie om op dit moment moderne beeldformaten in websites te integreren. De voordelen op het gebied van compressie en beeldkwaliteit zijn overtuigend. Geen ander beeldformaat combineert deze eigenschappen en verhoogt zo sterk de laadtijden. Momenteel maken nog veel te weinig websitemakers gebruik van het AVIF-formaat, hoewel de browsersupport meer dan 85% bedraagt en het technisch geen hindernis vormt om WebP nog steeds als reserve te gebruiken. SEO is aan verandering onderhevig. AVIF alleen is natuurlijk niet voldoende om topwaarden te behalen bij de PageSpeed-Insights; daarvoor zijn nog andere technische factoren nodig. Als het gaat om het integreren van moderne beeldformaten, zul je met AVIF betere resultaten kunnen behalen in vergelijking met WebP.

Alleen content geoptimaliseerd voor zoekwoorden zal niet meer voldoende zijn, omdat door AI internet wordt overstelpt met inhoud, waardoor veel websites met een sterk opgebouwde, inhoudelijke gelijkheidspositie met hun concurrenten strijden om online zichtbaarheid. Technische SEO en met name het slagen voor de Core Web Vitals worden daarom steeds meer een belangrijke rangschikkingsfactor en dus een tie-breaker, omdat Google de gebruikers de best mogelijke gebruikerservaring wil bieden. AVIF is - naast andere factoren - een deel van de oplossing om je laadtijden te versnellen, de gebruikerservaring te verbeteren en op perspectief de online zichtbaarheid te verbeteren.

Meer ontdekken over SEO, gebruikerservaring, design en technologische trends

Als je in principe geïnteresseerd bent in onderwerpen als SEO, gebruikerservaring, AI-tools en nieuwe webtechnologieën, kun je meer te weten komen in onze trainingen en andere artikelen hier op de blog.

Nu is het jouw beurt

Als deze post waardevol voor je was, schrijf dan gerust een recensie op Google. Elke recensie ondersteunt ons. Als je hulp nodig hebt bij het implementeren van AVIF in jouw webproject, kun je contact met ons opnemen via onze agency-website.