Ga naar de inhoud 
avif versus webp bepaalt hoe snel je pagina's laden en hoe scherp foto's en afbeeldingen worden weergegeven. Ik laat je zien waar AVIF dankzij compressie een voorsprong heeft, waar WebP scoort met snelle decodering en hoe je beide slim kunt combineren.
Centrale punten
Wie Beelden slim leveren bespaart tijd, verkeer en CPU-cycli. Ik vat de belangrijkste verschillen kort samen voordat ik in detail treed. Je krijgt duidelijke aanbevelingen over hoe je AVIF en WebP samen kunt gebruiken in je dagelijkse hostingwerkzaamheden. Zo bereik je korte laadtijden zonder kwaliteitsverlies. Doel blijft: snel, compatibel, onderhoudsarm.
- Compressie: AVIF bereikt bij gelijke kwaliteit meestal 20-50% kleinere bestanden dan WebP.
- Snelheid: WebP decodeert sneller in de browser en ontlast de CPU aan de kant van de gebruiker.
- kwaliteit: AVIF blinkt uit bij foto's, kleurverlopen en fijne details; WebP is zeer geschikt voor transparante afbeeldingen.
- Steun: WebP werkt betrouwbaar in bijna alle moderne browsers; AVIF haalt snel in.
- Praktijk: Hybride opstelling met
: eerst AVIF, WebP als fallback.
Lijsten helpen alleen bij de start; de praktijk wordt bepaald door motieven, doelapparaten en statistieken. Ik laat je concrete instellingen zien, zodat je zonder experimenten tot betrouwbare resultaten komt.
WebP en AVIF in het kort
WebP is gebaseerd op de VP8-codec en is breed ingeburgerd in browsers, CMS en tools. AVIF is gebaseerd op AV1 en maakt gebruik van geavanceerde methoden die redundantie in het beeld nauwkeuriger verwijderen. Hierdoor neemt de bestandsgrootte aanzienlijk af bij een gelijkblijvende visuele indruk, wat directe gevolgen heeft voor de laadtijden. WebP voelt in het dagelijks gebruik erg snel aan, omdat het decoderen minder CPU vereist. Voor projecten met gemengde motieven kies ik daarom voor een combinatie die beide sterke punten combineert en risico's minimaliseert.
Compressie en bestandsgrootte bij hostinggebruik
AVIF bespaart gemiddeld ongeveer 50% ten opzichte van JPEG, terwijl WebP ongeveer 30% reductie oplevert. In een directe vergelijking liggen AVIF-bestanden meestal 20-50% onder WebP, zonder zichtbare verliezen bij typische motieven. Dit vermindert LCP-relevante bytes en ontlast mobiele gebruikers met beperkte bandbreedte. Bij portfolio's en winkels met veel foto's is dit voordeel enorm groot voor alle categoriepagina's. Voor een diepere start vergelijk ik graag basislijnen met de WebP versus JPEG: vergelijking en leg dan AVIF er bovenop.
Laadtijd, decodering en CPU
WebP rendert in veel scenario's merkbaar sneller, omdat decoders volwassener en lichter zijn. AVIF heeft meer rekentijd nodig, maar compenseert dit vaak met een kleinere payload. Op snellere apparaten is het verschil nauwelijks merkbaar, terwijl zeer oude smartphones nog iets langer bezig zijn met het verwerken van AVIF-afbeeldingen. Voor kritische above-the-fold-motieven met beperkte tijdreserve gebruik ik daarom graag WebP-fallbacks. Zodra het motief groot of gedetailleerd is, wint AVIF door minder overdracht en zorgt het uiteindelijk toch voor snellere startweergaven.
Beeldkwaliteit per motieftype
Foto's met fijne texturen, schaduwen en zachte overgangen zien er in AVIF vaak gladder en met minder artefacten uit. WebP houdt goed stand, maar vertoont bij lage bitsnelheden eerder banding of randflikkering. Voor logo's, pictogrammen en UI-elementen overtuigt WebP dankzij de zuivere transparantie en zeer kleine bestanden. Ik vervang animaties graag door WebP in plaats van GIF, omdat de hoeveelheid gegevens en de CPU-belasting aanzienlijk afnemen. Bij High Dynamic Range of 10-bits scènes speelt AVIF zijn sterke punten uit en behoudt het de toonwaarden beter.
Compatibiliteit en fallback-strategieën
WebP wordt door vrijwel alle moderne browsers ondersteund, inclusief Safari vanaf versie 14. AVIF is inmiddels beschikbaar in Chrome, Firefox, Edge en nieuwere Safari-versies, maar oudere apparaten blijven een onzekere factor. Daarom geef ik prioriteit aan AVIF, gebruik ik WebP als terugvaloptie en kies ik indien nodig JPEG als laatste redmiddel. Zo geeft de client automatisch het beste formaat weer, zonder dat gebruikers hoeven in te grijpen. Deze gradatie houdt de levering betrouwbaar en vermindert het aantal supportgevallen aanzienlijk.
Praktische opzet met het picture-element
Afbeelding laat me meerdere bronnen opgeven en laat de browser de beslissing nemen. Ik zet AVIF op de eerste plaats, stel WebP in als tweede bron en leg een standaardformaat als fallback in de img-tag. Met loading=“lazy“ bespaar ik computertijd voor onderliggende motieven, zonder risico te lopen op lay-outsprongen. Bovendien definieer ik breedtes via srcset en sizes, zodat apparaten alleen geschikte varianten laden. Zo controleer ik de overdracht en weergave rechtstreeks in de HTML en houd ik het onderhoud overzichtelijk.
Pijpleidingen, CMS en CDN
Automatisering neemt werk uit handen: een build-pipeline genereert vanuit een masterafbeelding de varianten voor AVIF, WebP en JPEG. In CMS-workflows volstaat één upload, de rest verloopt via plug-ins of worker-jobs. Een CDN versnelt de levering en kan varianten on the fly genereren of cachen. Voor WordPress gebruik ik graag een integratie met Transformations-Edge, bijvoorbeeld een Image-CDN met Bunny.net. Zo komen gebruikers altijd dicht bij de Edge-PoP terecht en krijgen ze de optimale beeldversie te zien.
Coderinginstellingen: kwaliteit doelgericht sturen
kwaliteitsparameters hebben een zeer verschillend effect, afhankelijk van het motief. In plaats van vaste waarden globaal vast te leggen, werk ik met richtlijnen per motieftype en test ik steekproefsgewijs.
- AVIF (libaom/SVT-AV1): Voor foto's begin ik met 10-bits, 4:2:0 chroma en een gemiddelde snelheid. Doelbereik bij cq-niveau/Kwaliteit: 24–34. Lager = beter, maar langzamer. Voor UI-afbeeldingen helpt 4:4:4 om kleurunvloeiingen schoon te houden, eventueel iets hogere kwaliteit (20–28).
- WebP (met verlies): Een stabiel uitgangspunt is q=70–82 met -m 6 (intensief zoeken) en -af (automatische filters). Voor delicate verloopcurves q=85; voor thumbnails q=60–70, wanneer contouren niet belangrijk zijn.
- WebP (verliesvrij / bijna verliesvrij): Voor pictogrammen/logo's levert bijna verliesvrij vaak 20–40% minder bytes dan PNG bij hetzelfde uiterlijk. Begin met 60–80 en controleer de randen.
Voorbeeld-CLI voor reproduceerbare builds:
# AVIF: 10-bit, goede balans tussen kwaliteit en snelheid avifenc --min 0 --max 63 --cq-level 28 --speed 4 --depth 10 --chroma 420 input.jpg -o output.avif
# WebP: foto's (lossy) cwebp -q 78 -m 6 -af -sharp_yuv input.jpg -o output.webp # WebP: UI/logo's (bijna lossless) cwebp -near_lossless 70 -z 6 input.png -o output.webp
Tips: Motieven met veel filmkorrel kunnen met de korreloptie van AVIF authentieker overkomen, in plaats van de codec „glad te strijken“. Bij texturen (huid, stoffen, bladeren) kunt u beter 1-2 kwaliteitsniveaus hoger gaan en daarvoor de resolutie iets verlagen – visueel wint de gerichte schaalvergroting meestal.
Responsieve afbeeldingen correct dimensioneren
Resolutie is de grootste hefboom. Ik stel bovengrenzen vast per sjabloon (hero, content, thumbnail) en bedien apparaatcategorieën via srcset en maten. Zo laden kleine apparaten nooit 2K-bestanden.
<picture>
<source type="image/avif"
srcset="hero-800.avif 800w, hero-1200.avif 1200w, hero-1600.avif 1600w"
sizes="(max-width: 900px) 92vw, 1200px">
<source type="image/webp"
srcset="hero-800.webp 800w, hero-1200.webp 1200w, hero-1600.webp 1600w"
sizes="(max-width: 900px) 92vw, 1200px">
<img src="hero-1200.jpg" width="1200" height="800" alt="Hero-motief"
loading="lazy" decoding="async">
</picture>
- breedteverdeling: 1,0x/1,5x/2,0x in plaats van 10 stappen is vaak voldoende; te veel varianten verhogen de build- en cache-druk.
- Afmetingen vastleggen: width/height of CSS aspect-ratio voorkomt CLS. Dit geldt ook voor plaatshouders/blurry placeholders.
- Downscaling: Voor het comprimeren matig verkleinen (bijv. niet meer dan 1,5–2,0x boven de doelbreedte). Een decoder moet altijd het volledige aantal pixels bufferen.
Prioritering, lazy loading en preload
Boven de vouw Afbeeldingen mogen de rest niet vertragen. Ik gebruik Priority Hints, pas Lazy Loading pas toe vanaf de tweede fold en werk spaarzaam met kritieke preloads.
- haalprioriteit: Hero-afbeeldingen krijgen fetchpriority="hoog"; al het andere blijft op „auto“ of „low“.
- Lazy loading: loading="lazy" voor inhoudsafbeeldingen diep in het document. Voor galerijen kan IntersectionObserver kort voor de viewport een schone voorlading activeren.
- Voorbelasting: Alleen voor 1-2 centrale boven-de-vouw-motieven, anders verwater je de prioriteitenwachtrij. Preloads moeten worden uitgevoerd met de daadwerkelijk gebruikte src/type overeenkomen.
Kleurbeheer, HDR en metadata
kleurechtheid is een kwaliteitskenmerk. AVIF ondersteunt hoge bitdieptes en moderne overdrachtsfuncties; WebP werkt in de praktijk meestal met 8-bits sRGB.
- bitdiepte: 10-bits AVIF vermindert banding bij kleurverlopen aanzienlijk. Voor klassieke webfoto's is 8-bits vaak voldoende, maar voor kleurverlopen is 10-bits de moeite waard.
- kleurruimten: Voor een consistente weergave sRGB insluiten. Grote gamutruimtes (Display P3) zijn mogelijk, maar bieden alleen voordelen op geschikte beeldschermen.
- HDR: AVIF transporteert PQ/HLG en scènes met hoog contrast beter. Controleer de weergavepaden in doelbrowsers; meng HDR niet ongecontroleerd in SDR-pagina's.
- Metagegevens: Controleer de oriëntatie/EXIF na het exporteren. Niet alle pijplijnen behouden GPS/EXIF; om redenen van gegevensbescherming is dat vaak gewenst.
Transparantie, pictogrammen en UI-afbeeldingen
Transparantie is lastig wanneer alfakanten halfdoorzichtig worden. Daarom test ik UI-afbeeldingen tegen verschillende achtergronden (licht/donker/contrastrijk).
- WebP Scoort met betrouwbare Alpha-ondersteuning en kleine bestanden in bijna verliesvrij formaat. Vaak de eerste keuze voor scherpe logo's.
- AVIF kan transparantie bieden, maar toolchains gedragen zich minder consistent. Voor CI-kritische logo's blijf ik conservatief bij WebP/PNG.
- SVG blijft de beste optie voor echte vectoren (logo's, pictogrammen, eenvoudige illustraties). Rasterformaten zijn hier slechts een tweede keuze.
- Sprites zijn zelden nodig. HTTP/2/3 en caching maken ze meestal overbodig – liever afzonderlijke, goed benoemde assets met een lange cache.
Serverconfiguratie, caching en beveiliging
Kop beslissen over cache-hits, CPU-belasting en correcte typebepaling. Ik stel correcte MIME-types, lange cache-tijden en specifieke bestandsnamen in.
- Content-type: image/avif, image/webp, image/jpeg correct afleveren. Vermijd generieke application/octet-stream.
- Caching: Cache-Control: public, max-age=31536000, immutable voor versienamen (hash in de naam). Zo blijft de browser uiterst efficiënt.
- Variëren: Bij onderhandelingen aan de serverzijde via Accept-Header is Vary: Accepteren Verplichting. Maak je gebruik van foto-markup, is dat meestal niet nodig.
- nosniff: X-Content-Type-Options: nosniff voorkomt verkeerde interpretaties. Helpt bij beveiligingsscans en consistent gedrag.
- ETag/Last-Modified: Bij grote hoeveelheden afbeeldingen kunt u beter sterke eTags gebruiken in plaats van content-hash; dit bespaart bandbreedte bij hervalidaties.
CDN-strategie: Varianten per breedte/formaat als aparte URL's cachen. On-the-fly-transcodering kan duur zijn; beter vooraf bouwen of agressief cachen.
Speciale gevallen en migratiepaden
Miniaturen/galerijen: Ik geef prioriteit aan veel kleine WebP-assets voor snappiness in rasters en gebruik AVIF in de gedetailleerde weergave. Dat voelt sneller aan op oude apparaten en bespaart toch bytes bij het zoomen.
Productafbeeldingen met zoomfunctie: Definieer maximale afmetingen (bijv. 2000–2600 px). Daarboven neemt alleen de decoderingsbelasting toe. Voor zoomviewers: progressieve LOD-benadering (klein laden, bij interactie grote stap opnieuw laden).
Sociale previews/OG: Zorg voor veilige formaten (JPEG/PNG) voor Open Graph/Share-afbeeldingen, omdat crawlers/webviews AVIF/WebP soms negeren. Dit staat los van je on-site levering.
E-mail: Nieuwsbriefclients ondersteunen AVIF minder vaak. Plan hier conservatief met JPEG/PNG en zet op het web in op Next‑Gen.
Animatie: WebP-animaties worden op grote schaal gebruikt en vervangen GIF's op een performante manier. AVIF-animaties zijn efficiënt, maar de ondersteuning ervan is minder uniform – gebruik ze dus gericht.
Rechten en licenties: Beide formaten zijn licentievrij. Dat is geruststellend voor bedrijfsopstellingen – geen patentrisico zoals bij sommige audio-/videocodecs.
Foutopsporing en kwaliteitsborging
Artefacten ontstaan vaak bij te strenge kwaliteitsdoelstellingen of verkeerde schaalvergroting. Ik controleer in 100% en 200% Zoom en kijk naar randen, huid, lucht.
- Banding: Verloop laat trappen zien? AVIF met 10-bits codering of iets hogere kwaliteit. Optioneel dithering in het masterbeeld.
- halo's: Overbelichte masterbeelden botsen met compressieverlies. Verminder de scherpte en codeer vervolgens opnieuw.
- Moiré/randflikkering: Test bij fijne patronen een hogere kwaliteit of een minimaal andere schaal (bijv. 98% in plaats van 100%).
- Alfa-franjes: Controleer tegen lichte/donkere achtergronden, schakel indien nodig over naar lossless/near-lossless.
Geautomatiseerde controles in de pijplijn helpen: SSIM/MS‑SSIM of VMAF als doelmetriek met toleranties, zodat niet elke afbeelding handmatig hoeft te worden beoordeeld. Daarnaast voer ik voorafgaand aan de roll-out een handmatige beoordeling uit van 10 tot 20 representatieve motieven.
Kerncijfers testen en controleren
Metriek zoals LCP, INP en TTFB laten zien of je beeldstrategie werkt. Ik test motieven eerst in het lab (Lighthouse) en daarna in het veld (RUM) om rekening te houden met echte apparaten en netwerken. Voor startpagina's en categorie-sjablonen is het de moeite waard om een A/B-vergelijking te maken tussen AVIF-first en WebP-first. Daarnaast let ik op cumulatieve lay-outverschuivingen, omdat verkeerde afmetingen anders de perceptie verpesten. Deze handleiding biedt een praktische hulp bij de eerste stappen: Afbeeldingen optimaliseren voor het web.
Kosten en klimaateffecten
Verkeer kost geld en energie, dus elke megabyte die wordt bespaard, komt rechtstreeks ten goede aan het budget en de CO₂-balans. Als AVIF het aantal bytes van een reeks afbeeldingen met een derde tot de helft vermindert, dalen de CDN- en origin-kosten aanzienlijk. Tegelijkertijd verlagen kortere laadtijden het bouncepercentage en verhogen ze de conversies, wat het rendement op de investering verhoogt. Aan de serverzijde blijft de CPU-belasting bij AVIF-generatie eenmalig, terwijl WebP-fallbacks een groot bereik bestrijken. Deze combinatie zorgt voor een goede balans tussen kosten, snelheid en milieu-impact.
Vergelijkingstabel: functies en ondersteuning
Overzicht helpt bij het nemen van beslissingen, vooral wanneer teams verschillende doelen nastreven. De tabel vat de praktische verschillen samen en is bedoeld voor beeldrijke pagina's, winkels en tijdschriften. Ik weeg grootte, snelheid, kwaliteit en bereik tegen elkaar af, zodat je niet hoeft te gissen. De waarden zijn praktijkgericht en gebaseerd op gangbare opstellingen. Controleer in speciale gevallen altijd je eigen steekproeven voordat je algemene regels vastlegt.
| Functie | AVIF | WebP |
|---|---|---|
| Bestandsgrootte versus JPEG | ca. 50% kleiner | ca. 30% kleiner |
| Bestandsgrootte versus WebP | 20–50% kleiner bij dezelfde kwaliteit | - |
| Decoderingssnelheid | langzamer, vaak gecompenseerd door kleinere bestanden | sneller, CPU-besparend |
| fotokwaliteit | Zeer goed, sterke overgangen/details | goed, bij lage bitsnelheid eerder artefacten |
| Transparantie | beschikbaar, afhankelijk van de toolchain | Zeer geschikt voor UI/logo's |
| Animatie | mogelijk, ondersteuning niet uniform | gevestigd, GIF-vervanger |
| Browserondersteuning | breed, oudere apparaten deels zonder ondersteuning | zeer breed, incl. safari vanaf 14 |
| Aanbevolen gebruik | Foto's, grote motieven, kwaliteit | UI-afbeeldingen, fallback, animatie |
Beslissingsmatrix op basis van projectdoelstelling
doelbeeld bepaalt de keuze: als het vooral gaat om minimale bytes bij fotoreeksen, wint AVIF. Als First Paint op oude apparaten bovenaan staat, loont WebP op prominente plaatsen. Voor winkels met veel productweergaven gebruik ik AVIF voor de detailweergave en WebP voor galerij-thumbnails. Tijdschriften profiteren van AVIF voor hero-foto's en verhaalafbeeldingen, terwijl WebP voldoende is voor UI-elementen en decoratieve afbeeldingen. Deze segmentatie houdt de onderhoudskosten laag en zorgt voor betrouwbare scores.
Korte balans voor de praktijk
Resultaat: Ik gebruik AVIF waar foto's domineren en bytes in massaproductie tellen, en laat WebP bestaan als compatibele, snelle terugvaloptie. Deze hybride aanpak combineert de kleinere payload van AVIF met de brede ondersteuning van WebP. Voor hostingopstellingen bieden beide next-gen-formaten meetbare voordelen ten opzichte van JPEG en PNG. Met een schone
