Waarom de videogrootte belangrijk is voor websites
Video is een van de grootste bestanddelen op de meeste webpagina's. Een slecht geoptimaliseerde hero-video of achtergrondclip kan megabytes toevoegen aan het paginagewicht en heeft directe invloed op:
- LCP (Largest Contentful Paint): als de video het grootste element is, bepaalt de laadtijd deze Core Web Vital-metriek
- Bandbreedtekosten: het serveren van 10 MB MP4's aan miljoenen bezoekers loopt snel op
- Mobiele ervaring: gebruikers met mobiele verbindingen hebben het meeste last van grote videobestanden
- SEO-ranking: Google gebruikt Core Web Vitals als rankingsignaal
WebM + VP9 vs MP4 + H.264 voor het web
Bij identieke visuele kwaliteit (SSIM/VMAF gelijkgesteld) produceert WebM met VP9-codering bestanden die 30–50% kleiner zijn dan MP4 met H.264. Voor een site die maandelijks 100 GB MP4-video levert, kan overschakelen naar WebM 30–50 GB bandbreedte besparen.
Realistische vergelijking op dezelfde 30 seconden 1080p-clip:
| Formaat | Codec | Bestandsgrootte | Kwaliteit (VMAF) |
|---|---|---|---|
| MP4 | H.264, CRF 23 | 10 MB | 94.2 |
| WebM | VP9, CRF 30 | 6 MB | 94.1 |
Browserondersteuning in 2026
WebM VP9 wordt ondersteund door 97%+ van de wereldwijde browsers in 2026:
- Chrome: sinds versie 29 (2013)
- Firefox: sinds versie 28 (2014)
- Edge: sinds versie 14 (Chromium-gebaseerd sinds 79)
- Safari: sinds versie 16.6 (2023) — de laatste grote achterblijver
Alleen IE11 en zeer oude Safari-versies hebben geen ondersteuning en vertegenwoordigen een verwaarloosbaar marktaandeel in 2026.
Het HTML5 Video-fallbackpatroon
De aanbevolen aanpak is WebM als eerste te serveren met MP4 als fallback via het HTML5-element <source>:
<video autoplay loop muted playsinline>
<source src="video.webm" type="video/webm">
<source src="video.mp4" type="video/mp4">
</video>
De browser downloadt en speelt de eerste bron die hij ondersteunt. Aangezien 97%+ van de browsers WebM ondersteunt, krijgt de overgrote meerderheid van de bezoekers het kleinere bestand. De MP4-fallback zorgt ervoor dat de overige ~3% de video toch kan bekijken.
De attributen autoplay loop muted playsinline laten de video zich gedragen als een GIF — automatisch afspelen, loopen, zonder geluid en inline op mobiele Safari.
Impact op Core Web Vitals
Overschakelen van MP4 naar WebM verbetert direct de webprestatiemetrieken:
- LCP-verbetering: kleinere bestanden laden sneller, wat Largest Contentful Paint verbetert
- Lagere bandbreedte: betere mobiele ervaring, vooral op langzame verbindingen
- Aanbeveling van Google: Lighthouse en web.dev bevelen geoptimaliseerde videoformaten expliciet aan
Onze VP9-coderingsinstellingen
Onze converter gebruikt deze VP9-instellingen, geoptimaliseerd voor weblevering:
- CRF 30: gelijkwaardig aan H.264 CRF 23 in visuele kwaliteit
- cpu-used 3: gebalanceerde coderingssnelheid voor online service
- row-mt 1: rijgebaseerde multithreading voor snellere codering
- Opus 128k audio: transparante audiokwaliteit, superieur aan AAC bij deze bitrate
- -b:v 0: pure op kwaliteit gebaseerde codering (geen bitratelimiet)
Voor diepere VP9-configuratie, zie onze gids voor VP9-coderingsinstellingen.
WebM alfakanaal (transparantie)
VP9 in WebM ondersteunt alfakanaal-transparantie — een uniek voordeel ten opzichte van H.264/MP4. Dit maakt transparante video-overlays op websites mogelijk: geanimeerde logo's, personages, effecten die naadloos opgaan in elke achtergrond. Gebruik -pix_fmt yuva420p in FFmpeg om te coderen met alfa.
AV1: de volgende stap
AV1 is de open codec van de volgende generatie van de Alliance for Open Media. Het biedt een extra 30% compressiewinst ten opzichte van VP9 maar codeert 5–10x langzamer. De browserondersteuning groeit (Chrome 70+, Firefox 67+, Safari 17+). Voor sites met intensief videogebruik is AV1 de toekomst — maar VP9 blijft in 2026 de praktische keuze voor de meeste gebruiksscenario's.