Productafbeeldingen maken vaak 60-80% van je totale paginagrootte uit. JPEG en PNG zijn betrouwbaar maar verouderd — ze verspillen bandbreedte en vertragen je site. WebP en AVIF zijn moderne alternatieven die tot 50% kleinere bestanden opleveren zonder kwaliteitsverlies. Voor webshops betekent dit snellere laadtijden, betere conversie en lagere hosting costs. Tijd om over te stappen.

Waarom JPEG/PNG verouderd zijn

JPEG bestaat sinds 1992, PNG sinds 1996. Beide formaten zijn niet geoptimaliseerd voor moderne compressie-technieken. Het gevolg:

Grote bestanden (2-5MB per productfoto is normaal)
Veel data-gebruik voor mobiele gebruikers
Trage laadtijden, vooral op 3G/4G
Hogere bounce rates

Moderne formaten lossen dit op met betere compressie én behoud van kwaliteit.

WebP: de praktische keuze

Ontwikkeld door Google, breed ondersteund (97% browsers).

Voordelen:

25-35% kleiner dan JPEG
Ondersteunt transparantie (zoals PNG)
Lossless én lossy compressie
Animaties mogelijk (GIF replacement)

Nadelen:

Iets minder compressie dan AVIF
Safari ondersteuning pas sinds 2020

Wanneer gebruiken: Nu. WebP is de safe bet voor webshops die vandaag willen optimaliseren.

AVIF: de toekomst

Ontwikkeld door Alliance for Open Media, nieuwste standaard.

Voordelen:

40-50% kleiner dan JPEG
Betere kwaliteit bij lage bitrates
HDR support
Toekomstbestendig

Nadelen:

Langzamere encoding (meer CPU nodig)
Browser support 94% (IE/oude browsers niet)
Nog niet alle tools ondersteunen AVIF

Wanneer gebruiken: Als performance kritiek is en je publiek moderne browsers gebruikt.

Implementatie in WooCommerce

Optie 1: Automatische conversie via plugin

ShortPixel (beste all-round):

Converteert automatisch naar WebP/AVIF
Behoud originelen als fallback
Bulk conversion van bestaande library
CDN integration

Imagify:

Real-time conversie bij upload
Resize opties
Lazy loading ingebouwd

EWWW Image Optimizer:

Gratis WebP conversie
Cloud of lokale processing
Automatic format selection

Optie 2: Server-level conversie

Nginx config voor automatic WebP serving:

location ~* \.(jpg|jpeg|png)$ {
    set $webp_suffix "";
    if ($http_accept ~* "webp") {
        set $webp_suffix ".webp";
    }
    add_header Vary Accept;
    try_files $uri$webp_suffix $uri =404;
}

Apache via .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

Optie 3: HTML picture element (meeste controle)

<picture>
  <source srcset="product.avif" type="image/avif">
  <source srcset="product.webp" type="image/webp">
  <img src="product.jpg" alt="Product naam">
</picture>

Browser kiest beste formaat dat ondersteund wordt.

Conversie workflow

Backup originelen: Bewaar JPEG/PNG als master
Bulk convert: Bestaande library via plugin
Automatiseer: Nieuwe uploads automatisch converteren
Test: Check visuele kwaliteit op verschillende devices
Monitor: PageSpeed Insights voor voor/na vergelijking
Fallback: Zorg dat oude browsers nog JPEG krijgen

Kwaliteit vs grootte balans

Webshop producten:

WebP: quality 85 (goede balans)
AVIF: quality 75 (vergelijkbaar met WebP 85)

Hero images:

WebP: quality 90
AVIF: quality 80

Thumbnails:

WebP: quality 75
AVIF: quality 65

Test altijd visueel — cijfers alleen zeggen weinig.

Meetbare impact

Gemiddelde webshop met 50 producten per pagina:

Voor: 15MB page weight (JPEG)
Na: 6-8MB (WebP) of 5-6MB (AVIF)
Resultaat: 40-60% sneller, betere Core Web Vitals, hogere conversie

Google meet dit en rankt snellere sites hoger.

Conclusie

WebP implementeren is no-brainer — doe het vandaag. AVIF toevoegen als je edge wilt hebben. Beide formaten zijn backwards compatible via fallbacks, dus er is geen risico. Kleinere bestanden betekent snellere site, tevreden klanten en betere rankings.

Hulp nodig bij bulk conversie of server-level optimalisatie? We zorgen dat je afbeeldingen optimal gecomprimeerd worden zonder kwaliteitsverlies.

WebP en AVIF: moderne afbeeldingsformaten voor webshops