WebP en AVIF uitgelegd
Wat zijn WebP en AVIF?
WebP is een afbeeldingsformaat van Google, en AVIF is een nieuwer formaat dat is gebaseerd op de AV1-videocodec. Beide zijn ontworpen om afbeeldingen bij gelijke kwaliteit kleiner te maken dan JPEG en PNG. Een kleiner bestand betekent minder data en dus een snellere pagina.
Beide formaten ondersteunen compressie met en zonder kwaliteitsverlies, en transparantie. WebP kan ook geanimeerde beelden bevatten. Je ziet ze steeds vaker op websites, al moet je zelf nagaan welke formaten je CMS of hostingomgeving ondersteunt.
Hoe verhouden ze zich tot JPEG en PNG?
Bij gelijke visuele kwaliteit is een WebP-bestand over het algemeen kleiner dan een JPEG of PNG. AVIF is meestal nog compacter dan WebP, maar het comprimeren kost meer rekentijd. Dat speelt vooral mee als je veel afbeeldingen tegelijk moet omzetten.
Er is ook een keerzijde. Hoe kleiner het bestand, hoe belangrijker het is om de kwaliteit te controleren. Bij sterke compressie kunnen blokjes en vervaging zichtbaar worden, vooral in verlopen en gladde vlakken. JPEG blijft een veilige keuze, zeker voor oudere systemen die alleen dat formaat kennen. Hoeveel een pagina totaal weegt, lees je bij paginagewicht en aantal requests.
Wat doet een browser met een onbekend formaat?
Een browser die een formaat niet kent, kan de afbeelding niet tonen. Als je een WebP- of AVIF-bestand rechtstreeks met een gewone img-tag inlaadt en de bezoeker gebruikt een oudere browser, dan ziet die bezoeker dus niets. Daarom gebruik je vaak het picture-element met meerdere bronnen.
De browser loopt de bronnen van boven naar beneden af en kiest de eerste die hij ondersteunt. Staat AVIF bovenaan, dan WebP, en als laatste de JPEG of PNG, dan heeft iedere bezoeker een werkende afbeelding. De moderne browser krijgt het kleinste bestand en de oudere browser krijgt nog steeds een plaatje.
Combineer het formaat met responsive afbeeldingen, zodat ook de grootte per schermbreedte klopt.
Wanneer kies je welk formaat?
Voor foto’s op websites is WebP een praktische keuze. AVIF is een goede optie als je de bestanden nog verder wilt terugbrengen en de extra omzettijd geen probleem is. Voor logo’s en iconen kies je beter SVG, een vectorformaat dat altijd scherp blijft.
Veel systemen zetten afbeeldingen automatisch om. Vraag je hostingprovider of je CMS dat ondersteunt, en controleer of het resultaat goed oogt. Converteren verkleint de afmetingen van een afbeelding niet; dat moet je zelf aanpassen, zie afbeeldingen optimaliseren.
Veelgestelde vragen
Ondersteunen alle browsers WebP en AVIF?
Ja, de grote moderne browsers ondersteunen WebP en AVIF. Oudere versies en sommige minder gangbare browsers doen dat niet. Daarom hoort er een terugvaloptie te zijn, zoals een JPEG of PNG. Bekijk bij twijfel welke browsers je bezoekers gebruiken.
Moet ik al mijn afbeeldingen omzetten naar WebP?
Nee, dat is niet verplicht. Het loont vooral bij grote fotopagina’s, waar de besparing in bytes oploopt. Voor kleine iconen of logo’s is het vaak zinvoller om een SVG of PNG te houden. Zet afbeeldingen om met een kwaliteitscontrole en test daarna of de pagina nog goed werkt.