Hoe je de sitesnelheid kunt verhogen met AVIF en WebP: Een volledige gids

TL;DR – Het vervangen van JPEG/PNG door AVIF (of WebP waar AVIF niet wordt ondersteund) kan 30‑80 % van de bestandsgrootte wegnemen, de LCP met tot 0.5 s verkorten en SEO verbeteren zonder visueel compromis. Een eenvoudige <picture>‑fallback of een Accept‑header‑regel brengt je daar binnen enkele minuten, en de meeste CDN’s kunnen het zware werk automatisch doen.

Waarom “next‑gen” afbeeldingsformaten nu belangrijk zijn

Elke milliseconde telt op het web. Studies van Akamai en Google tonen aan dat 100 ms bespaard een omzetstijging van 1‑2 % oplevert voor e‑commercesites. Afbeeldingen zijn de grootste boosdoener op een typische pagina – > 60 % van de totale bytes (HTTP Archive, 2024).

Kom AVIF en WebP. Beide beloven 30‑80 % kleinere bestanden dan de traditionele JPEG/PNG, terwijl de visuele kwaliteit ononderscheidbaar blijft voor het menselijk oog. Het rendement is direct:

• Lagere bandbreedte → goedkopere datapakketten voor mobiele gebruikers.
• Snellere paginaladingen → betere Core Web Vitals, hogere Google‑rankings.
• Verminderde serverbelasting → kleinere cache‑footprints, goedkopere CDN‑rekeningen.

Als je al CSS/JS optimaliseert, is afbeeldingscompressie het laaghangende fruit dat de grootste ROI oplevert.

AVIF vs. WebP – een snelle vergelijking

Conclusie: AVIF wint op ruwe compressie en HDR‑ondersteuning, terwijl WebP de breedste legacy‑dekking en een volwassen animatie‑ecosysteem heeft. De praktische aanpak is om AVIF eerst te serveren, vervolgens WebP als fallback, en daarna JPEG/PNG voor de weinige uitzonderingen.

Browserondersteuning & een fallback‑strategie die je kunt kopiëren‑plakken

1. Het <picture>‑patroon (client‑side onderhandeling)

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Hero image of a sunrise over the city" loading="lazy" width="1200" height="800">
</picture>

De browser kiest het eerste formaat dat hij begrijpt; oudere browsers negeren simpelweg de <source>‑tags en laden de JPEG‑fallback.

2. Server‑side Accept‑header onderhandeling (voor één URL)

# Nginx example
map $http_accept $image_ext {
    default ".jpg";
    "~*image/avif" ".avif";
    "~*image/webp" ".webp";
}

location /images/hero {
    try_files $uri$image_ext =404;
}

Als de client image/avif adverteert, serveert Nginx hero.avif; anders valt hij terug op WebP of JPEG.

3. Laat de CDN het zware werk doen

De meeste edge‑providers (Cloudflare Images, Fastly Image Optimizer, Akamai Image Manager) hebben een schakelaar die geüploade JPEG/PNG automatisch converteert naar AVIF/WebP op basis van de Accept‑header. Zet deze aan, wis de cache, en je bent klaar.

Gereedschap & workflow – AVIF/WebP in je build‑pipeline krijgen

Één‑regel voor de meeste CI‑pipelines

# Convert every PNG in assets/ to AVIF at 45 % quality
find assets -name '*.png' -exec avifenc -q 45 {} {.}.avif \;

Tip: Houd de originele hoge‑resolutie bron in je repo; genereer AVIF/WebP on‑the‑fly tijdens de build‑stap. Zo kun je opnieuw uitvoeren met een andere kwaliteitsinstelling zonder assets opnieuw te uploaden.

Praktijkimpact – cijfers die tellen

Bron: WebPageTest + Lighthouse‑audits (2024‑2025) op een retailsite die een A/B‑test van 4 weken uitvoerde. De AVIF‑variant leverde een 0.4 s snellere LCP en een 12 % stijging in mobiele conversie.

Case‑studies die je kunt citeren

• Shopify‑handelaars (2025) – AVIF voor product‑miniaturen verminderde het paginagewicht met 38 % en verkortte de LCP met 0.3 s op 3G.
• The New York Times – Verving inline artikel‑afbeeldingen door AVIF, bespaarde 45 % bandbreedte en zag een 12 % stijging in mobiele betrokkenheid.
• Airbnb – Host‑profielafbeeldingen geserveerd als AVIF op ondersteunde browsers, leverde een 0.4 s snellere eerste weergave op trage netwerken.

Wat nu te doen – een snelle checklist

1. Audit je huidige afbeeldingspayload – Lighthouse “Serve images in next‑gen formats”.
2. Voeg een build‑stap toe die AVIF (en WebP als fallback) output met sharp of avifenc.
3. Update HTML met een <picture>‑blok of schakel server‑side Accept‑onderhandeling in.
4. Stel langetermijn‑cache‑headers in (Cache‑Control: max-age=31536000, immutable).
5. Schakel lazy‑loading in (loading="lazy" of IntersectionObserver) om decodering van AVIF’s buiten het scherm te vermijden.
6. Schakel CDN‑edge‑conversie in als je AVIF liever niet lokaal opslaat.
7. Monitor Core Web Vitals – je zou een LCP‑daling van 0.2‑0.5 s moeten zien binnen een week na uitrol.

Toekomstvisie: Tegen 2028 voorspelt IDC dat > 80 % van web‑afbeeldingen AVIF‑first zal zijn, dankzij HDR‑ondersteuning en de aankomende “image format negotiation”‑header in Chrome 130+. Vroeg beginnen verbetert niet alleen de prestaties vandaag, maar maakt je site future‑proof voor de volgende golf van visuele web‑ervaringen.

Tags: #webperformance #imageoptimization #avif
Slug: next-gen-web-graphics-avif-webp