Websiteafbeeldingen

Zo gebruik je AVIF-afbeeldingen op je website

Een afbeelding naar AVIF omzetten is pas de eerste stap. Controleer na publicatie of de pagina de afbeelding goed weergeeft en de browser daadwerkelijk de nieuwe versie laadt.

Door Pixilo · Bijgewerkt op 9 oktober 2026

De belangrijkste stappen

Kies een afbeelding die al op een pagina wordt gebruikt en bewaar het origineel.
Maak een AVIF-versie en controleer de kwaliteit.
Voeg het AVIF-bestand toe op een manier die je publicatiesysteem ondersteunt.
Controleer de gepubliceerde pagina op een telefoon en een computer.
Bekijk de netwerkverzoeken in de browser om vast te stellen welk afbeeldingsbestand wordt geladen.

Hieronder lees je waar je bij elke stap op moet letten.

AVIF-afbeelding op een website geplaatst met een picture-element

Controleer hoe je website met AVIF omgaat

Een publicatiesysteem kan een AVIF-bestand accepteren in de mediabibliotheek, maar het anders verwerken dan JPG of PNG. Controleer daarom zowel het toevoegen van het bestand als het gebruik op een gepubliceerde pagina.

Probeer het met één afbeelding:

Accepteert de mediabibliotheek het bestand?
Verschijnt de afbeelding in de pagina-editor?
Werkt de afbeelding op de gepubliceerde pagina?
Worden de benodigde kleinere versies gemaakt, als het systeem die normaal aanmaakt?

Een optimalisatiedienst of CDN levert je afbeeldingen misschien al als AVIF. Controleer de huidige werking voordat je bestanden handmatig vervangt. Een JPG in de mediabibliotheek vertelt op zichzelf niet welk formaat bezoekers ontvangen.

Bereid een afbeelding voor de proef voor

Kies een afbeelding die kenmerkend is voor je website. Een productfoto, de hoofdafbeelding van een artikel of een transparante illustratie is nuttiger dan een willekeurige testafbeelding.

Gebruik de converter voor het oorspronkelijke formaat:

De AVIF-converters van Pixilo behouden de oorspronkelijke pixelafmetingen en gebruiken een vaste instelling voor compressie met verlies. Ze maken één stilstaand beeld. Animatie, de oorspronkelijke HDR-informatie en metadata blijven niet behouden.

Vergelijk het gedownloade AVIF-bestand met het origineel. Let vooral op leesbare tekst, fijne randen, kleurverlopen en transparante delen. Controleer ook de bestandsgrootte: omzetten maakt een bestand niet altijd kleiner.

Behoud de huidige versie als de kwaliteit onvoldoende is of het bestand groter wordt. Van formaat veranderen is geen doel op zich.

Voeg AVIF toe via je publicatiesysteem

Gebruik je een paginabouwer of contentmanagementsysteem, voeg het AVIF-bestand dan toe aan de mediabibliotheek en selecteer het als nieuwe afbeelding in het betreffende afbeeldingselement.

Laat tijdens de proef de weergavegrootte en uitsnede gelijk. Zo beoordeel je de formaatwijziging zonder tegelijkertijd de pagina-indeling te veranderen.

Controleer bij het vervangen:

de alternatieve tekst
de beeldverhouding en uitsnede
een eventueel bijschrift en link
de indeling op computers en mobiele apparaten.

Een bestandsextensie in een URL wijzigen zet de afbeelding niet om. Publiceer een echt AVIF-bestand of gebruik een dienst die de omzetting uitvoert.

Bied zo nodig een alternatief formaat aan

Als je zelf de HTML bewerkt, kun je met een picture-element AVIF als eerste keuze aanbieden en JPG als alternatief.

In dit voorbeeld tonen beide bestanden dezelfde afbeelding van 1200 × 800 pixels. Pas de paden, afmetingen en alternatieve tekst aan je eigen afbeelding aan.

<picture>
  <source srcset="/images/product.avif" type="image/avif">
  <img
    src="/images/product.jpg"
    width="1200"
    height="800"
    alt="Blauwe rugzak van voren gezien">
</picture>

Een browser die AVIF ondersteunt, kan de AVIF-versie kiezen. Ondersteunt hij het opgegeven formaat niet, dan gebruikt hij hier de JPG. Kies voor een transparante afbeelding een alternatief dat transparantie behoudt, zoals PNG. Zie de MDN-documentatie over het picture-element.

Dit alternatief vangt ontbrekende formaatondersteuning op. Het herstelt niet automatisch een verkeerde AVIF-URL of een beschadigd bestand.

Beheert je publicatiesysteem alternatieve formaten automatisch, gebruik dan die ingebouwde functie.

Controleer welke afbeelding de browser laadt

Dat een afbeelding zichtbaar is, bewijst nog niet dat de pagina AVIF gebruikt. De browser kan de oude afbeelding, een kleinere versie of een bestand van een optimalisatiedienst laden.

In Chrome kun je dit controleren met de ontwikkelaarstools:

Open de gepubliceerde pagina en de ontwikkelaarstools.
Kies het tabblad Network en het filter Img.
Schakel Disable cache in en herlaad de pagina met de tools geopend.
Open het verzoek voor de afbeelding die je wilt controleren.
Bekijk de URL en het Content-Type van de respons. Voor AVIF is dat image/avif.

De extensie is niet de enige aanwijzing: een optimalisatiedienst kan AVIF leveren via een URL die eindigt op .jpg. In Network kun je ook de grootte van het overgedragen bestand controleren. Zie de Chrome-handleiding voor het bekijken van netwerkverzoeken.

Gebruikt de pagina een aparte mobiele afbeelding of meerdere afmetingen, controleer dan ook die verzoeken.

Controleer de gepubliceerde pagina voordat je meer afbeeldingen vervangt

Bekijk de afbeelding op de plek waar deze echt wordt gebruikt. Het voorbeeld in de mediabibliotheek toont niet de mobiele uitsnede, de invloed van de pagina-achtergrond of welke versie daadwerkelijk wordt geladen.

Controleer of:

de hele afbeelding zichtbaar is of de uitsnede bewust is gekozen
tekst en belangrijke details voldoende scherp blijven
transparante delen goed worden weergegeven tegen de pagina-achtergrond
de gereserveerde ruimte voor de afbeelding en de pagina-indeling blijven kloppen
de browser het verwachte bestand laadt.

Vergelijk het laden voor en na de wijziging met dezelfde pagina, venstergrootte en testinstellingen. Eén snellere laadbeurt bewijst geen blijvende verbetering. Een kleinere bestandsgrootte is eenvoudiger vast te stellen wanneer de afbeeldingen dezelfde afmetingen en een aanvaardbare kwaliteit hebben.

Als de AVIF-afbeelding niet verschijnt

Controleer eerst of de directe afbeeldings-URL in de browser opent. Werkt die niet, controleer dan de bestandslocatie en eventuele foutmeldingen van het publicatiesysteem.

Werkt de afbeelding direct, maar toont de pagina de oude versie, controleer dan de URL van het afbeeldingselement, andere afmetingen en de websitecache. De browsercache omzeilen wist niet de cache van het publicatiesysteem of het CDN.

Blijft de oorzaak onduidelijk, plaats dan het werkende origineel terug in het afbeeldingselement en onderzoek de AVIF-ondersteuning voordat je opnieuw test.

Veelgestelde vragen

Moet je alle website-afbeeldingen vervangen door AVIF?

Nee. Vervang afbeeldingen wanneer het bestand nuttig kleiner wordt en het resultaat met aanvaardbare kwaliteit in je publicatiesysteem werkt.

Is AVIF toevoegen aan de mediabibliotheek voldoende?

Nee. Selecteer de afbeelding ook voor gebruik op de pagina. Bekijk de netwerkverzoeken van de gepubliceerde pagina om te zien welk bestand wordt geladen.

Heeft AVIF altijd een alternatief nodig?

Dat hangt af van de browsers van je bezoekers en je manier van publiceren. Een ander formaat is nuttig voor omgevingen waarin AVIF niet werkt.

Waarom verkleint de nieuwe AVIF het bestand dat de pagina laadt niet?

De pagina gebruikt mogelijk nog de oude afbeelding of een andere versie die je publicatiesysteem heeft gemaakt. Het AVIF-bestand zelf kan ook groter zijn. Controleer het werkelijke verzoek en vergelijk bestanden met dezelfde pixelafmetingen.

Samenvatten met