Wat is het beste videoformaat voor het web?
| Formaat | Video-/audiocodec | Speelt af in | Bestandsgrootte | Gebruik het voor |
|---|---|---|---|---|
| MP4 | H.264 / AAC | Elke browser en elk apparaat | Uitgangspunt | De standaard en de fallback |
| WebM | VP9 / Opus | Alle huidige grote browsers | Vaak ongeveer 30% kleiner | Primaire bron op je eigen site |
| MP4 of WebM | AV1 / Opus of AAC | Chrome, Firefox, Edge; Safari met AV1-hardware | Kleinst | Drukbezochte sites die twee keer kunnen coderen |
| MOV, AVI, MKV | Verschillend | Niet betrouwbaar in browsers | — | Converteer voordat je ze op een website zet |
Kort antwoord: codeer MP4 (H.264, AAC) zodat de video overal afspeelt, en zet een WebM-bron (VP9) vooraan voor browsers die het kleinere bestand kunnen gebruiken. Voor YouTube, Vimeo of sociale netwerken heb je alleen MP4 nodig.
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.
Illustratief voorbeeld voor een 1080p-clip van 30 seconden (de werkelijke grootte hangt af van de inhoud):
| Formaat | Codec | Bestandsgrootte | Kwaliteit |
|---|---|---|---|
| MP4 | H.264, CRF 23 | ~10 MB | Referentie |
| WebM | VP9, CRF 30 | ~6 MB | Vergelijkbaar |
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: recente versies — 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: qua visuele kwaliteit ongeveer vergelijkbaar met H.264 CRF 23
- cpu-used 3: gebalanceerde coderingssnelheid voor online service
- row-mt 1: rijgebaseerde multithreading voor snellere codering
- Opus 128k audio: hoge audiokwaliteit voor de meeste content
- -b:v 0: pure op kwaliteit gebaseerde codering (geen bitratelimiet)
- yuv420p, even afmetingen: 8-bit 4:2:0-kleur die elke VP9-decoder afspeelt; breedte en hoogte worden afgerond op even getallen
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 comprimeert beter dan VP9, maar codeert veel langzamer. Browserondersteuning: Chrome 70+, Firefox 67+ en Safari 17+ op apparaten met AV1-hardwaredecodering. Voor sites met intensief videogebruik is AV1 de toekomst — maar VP9 blijft in 2026 de praktische keuze voor de meeste gebruiksscenario's.
Videoformaat vs codec: wat is het verschil?
Een videoformaat (container) is de verpakking van het bestand: MP4, WebM, MOV, MKV. Een codec bepaalt hoe het beeld en geluid daarin worden gecomprimeerd: H.264, VP9, AV1, AAC, Opus.
Browsers hebben een passende combinatie van beide nodig: een MP4 met H.264 speelt overal af, maar een MP4 met H.265 misschien niet. Als een gids “gebruik MP4” zegt, bedoelt hij MP4 met H.264-video en AAC-audio.