# MP4 of WebM: welk videoformaat moet je exporteren [Canonical HTML page](https://gradiently.design/nl/guide/mp4-vs-webm) Twee containers, een handvol codecs en één praktische vraag: welk bestand geef je aan Instagram en welk zet je op je website. ## The short version - MP4 is het veiligste videoformaat om te exporteren, omdat het op bijna elke telefoon, browser, editor en socialmediaplatform speelt. - WebM is een open, royaltyvrij formaat dat bij vergelijkbare kwaliteit vaak kleiner is dan MP4, wat handig is op websites. - Exporteer voor uploads naar social MP4, omdat platforms het betrouwbaar accepteren en alles toch opnieuw coderen. - Op een website is een gangbaar patroon om eerst WebM te bieden en MP4 als terugvaloptie in één video-element. - WebM kan transparantie bevatten in browsers die dat ondersteunen, wat gewone MP4 met H.264 niet kan. Bij de keuze **MP4 of WebM** exporteer je MP4 wanneer je uploadt naar een plek die je niet beheert, zoals Instagram, TikTok, LinkedIn, de inbox van een klant of een videoeditor, omdat het bijna overal speelt. Kies WebM voor je eigen website, waar het bij dezelfde kwaliteit vaak kleiner is, en bied bij voorkeur beide aan zodat elke browser het formaat kiest dat hij het best afspeelt. Daarmee heb je de meeste beslissingen gehad. De rest van deze pagina legt uit waarom, en de enkele gevallen waarin het antwoord verandert. ## Wat MP4 en WebM eigenlijk zijn Beide zijn **containers**: dozen met een videostream, een audiostream en wat informatie erover. Wat kwaliteit en grootte bepaalt, is de **codec** erin. MP4 bevat meestal H.264-video en AAC-audio, soms H.265 of AV1. WebM bevat VP8-, VP9- of AV1-video met Opus- of Vorbis-audio. WebM is gemaakt als open, royaltyvrij formaat voor het web; MP4 is de al lang gevestigde standaard waaromheen camera’s, telefoons en montagesoftware zijn gebouwd. | Kenmerk | MP4 | WebM | | --- | --- | --- | | Gebruikelijke videocodecs | H.264, H.265, AV1 | VP8, VP9, AV1 | | Gebruikelijke audiocodecs | AAC | Opus, Vorbis | | Bestandsgrootte | Klein | Vaak kleiner bij vergelijkbare kwaliteit | | Speelt op | Bijna alles | Moderne browsers; wisselender in apps en editors | | Uploads naar social | Overal geaccepteerd | Niet betrouwbaar geaccepteerd | | Transparantie | Niet met H.264 | Ja, met VP9 in ondersteunende browsers | | Licenties | Sommige codecs vallen onder patentlicenties | Open en royaltyvrij | Het grote plaatje. Ondersteuning verandert na verloop van tijd, dus controleer de actuele browserondersteuning op caniuse voordat je op een randgeval vertrouwt. ## Welk formaat voor social media Exporteer MP4. Elk groot platform accepteert het en elk platform codeert wat je uploadt opnieuw, dus een kleinere WebM levert niets op zodra hij er staat. Wat echt verandert hoe je video er na het uploaden uitziet, zijn de beeldgrootte, de framerate en de kwaliteit van het bestand dat je verstuurt. Stuur een schone MP4 van 1080×1920 voor Reels en stories, of 1080×1350 voor een staande feedpost, en het platform hoeft niets te herschalen. - Reel, story, TikTok 9:16: 1080 × 1920 - Staande post 4:5: 1080 × 1350 - Vierkante post 1:1: 1080 × 1080 - Liggend 16:9: 1920 × 1080 De beeldformaten die je het vaakst exporteert. Elk ervan hoort als MP4 omhoog. Voor de volledige lijst met beeldformaten per platform, zie [videoformaten voor social media](https://gradiently.design/nl/guide/social-video-sizes). ## Welk formaat voor een website Op je eigen site beheer je de speler, dus je kunt beide aanbieden. De browser leest de `source`-elementen op volgorde en speelt de eerste af die hij ondersteunt. Zet WebM eerst als je WebM-bestand het kleinste van de twee is, en houd MP4 als terugval voor elke browser die het niet kan afspelen. ```html ``` Eerst WebM, MP4 als terugval. De poster staat tijdens het laden van de video en voor iedereen wiens browser geen van beide kan afspelen. Meet voordat je iets aanneemt. Bij sommige clips, vooral heel korte of heel eenvoudige, is een goed gecodeerde MP4 net zo klein als de WebM, en één bestand aanbieden is eenvoudiger. De gids van MDN over [webvideocodecs](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) is de referentie voor wat elke browser afspeelt. Is de clip een achtergrond, dan behandelt [videoachtergronden op websites](https://gradiently.design/nl/guide/video-background-website) posterafbeeldingen, formaten en prestaties. ## Omzetten tussen MP4 en WebM Heb je het ene formaat en heb je het andere nodig, dan kan het gratis opdrachtregelprogramma FFmpeg beide richtingen aan. De opdrachten hieronder zijn verstandige beginpunten voor ontworpen loops: geen audio, goede kwaliteit en een MP4 die begint te spelen voordat hij helemaal is gedownload. ```bash # WebM to MP4 (H.264), ready for social uploads and the web ffmpeg -i loop.webm -c:v libx264 -crf 20 -preset slow \ -pix_fmt yuv420p -movflags +faststart -an loop.mp4 # MP4 to WebM (VP9), usually smaller for your website ffmpeg -i loop.mp4 -c:v libvpx-vp9 -crf 32 -b:v 0 -an loop.webm ``` Lagere CRF betekent hogere kwaliteit en grotere bestanden. Laat -an weg als de video geluid heeft dat je wilt houden. > **Waarom yuv420p ertoe doet** Sommige encoders maken MP4-bestanden in een kleurformaat dat telefoons en browsers weigeren af te spelen. Met `yuv420p` blijft het bestand in het formaat dat alles begrijpt. ## Verlopen, banding en kwaliteit Zachte verlopen zijn het moeilijkst te comprimeren. Grote vlakken met langzaam veranderende kleur laten elk tekort aan bits zien als zichtbare trappen, en donkere verlopen laten het het eerst zien. Beide formaten kunnen dit goed aan bij een ruime kwaliteitsinstelling; geen van beide bij een krappe. Een vleugje korrel in het ontwerp helpt enorm, omdat encoders textuur bewaren in plaats van die plat te drukken tot banden. - Vloeiend: genoeg bitrate: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Trapsgewijs: uitgehongerde encoder: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` Een overdreven beeld van banding. De oplossing is in MP4 en WebM hetzelfde: meer kwaliteit, een beetje korrel en geen extra herschalen. De oorzaken en oplossingen voor stilstaande beelden staan in [banding in verlopen](https://gradiently.design/nl/guide/gradient-banding). De geanimeerde variant voegt nog één regel toe: exporteer op het exacte formaat waarop je publiceert, zodat niets twee keer wordt geschaald. ## Waar GIF past GIF is geen videoformaat en is voor dezelfde loop het grootste van de drie, met een limiet van 256 kleuren die verlopen laat bandvormen. Het enige bolwerk is e-mail, waar de meeste inboxen GIF’s tonen en heel weinig video afspelen. De vergelijking van alle drie staat in [GIF versus MP4](https://gradiently.design/nl/guide/gif-vs-mp4) en het vak van een goede maken staat in [geanimeerde GIF’s](https://gradiently.design/nl/guide/gif-maker-tips). ### Exporteer MP4 voor - Instagram, TikTok, LinkedIn, X, YouTube - Versturen naar een klant of een editor - Presentaties en schermen die je niet beheert - Elk moment dat je het niet zeker weet ### Exporteer WebM voor - Je eigen website, naast een MP4 - Overlays die transparantie nodig hebben in de browser - Pagina’s waar elke kilobyte telt - Browsertools die WebM standaard opnemen In Gradiently zijn video-exports een Pro-functie en komen ze als MP4 of WebM, afhankelijk van wat je browser kan opnemen. In beide gevallen krijg je de bewegende Mark achter je tekst tot 1080p, klaar om te uploaden of in te sluiten. De details staan in [afbeeldingen en loops exporteren](https://gradiently.design/nl/guide/export-images-and-loops). ## FAQ ### Is WebM beter dan MP4? WebM is bij vergelijkbare kwaliteit vaak kleiner en is open en royaltyvrij, maar MP4 speelt op veel meer apparaten en apps. Voor websites is WebM een goede eerste keuze met MP4 als terugval; voor al het andere is MP4 veiliger. ### Kan ik WebM uploaden naar Instagram of TikTok? Reken er niet op. Zet het eerst om naar MP4, dat elk platform accepteert, op het exacte beeldformaat van het formaat waarin je post. ### Speelt Safari WebM af? Recente versies van Safari spelen WebM af, maar de ondersteuning kwam later dan in andere browsers en verschilde per codec en apparaat. Met een MP4 als terugval hoef je je er niet druk om te maken. ### Wat is kleiner, MP4 of WebM? WebM met VP9 of AV1 is bij vergelijkbare kwaliteit vaak kleiner dan MP4 met H.264, maar niet altijd. Codeer beide en vergelijk de echte bestanden. ### Welk formaat ondersteunt transparante video? WebM met VP9 kan een alfakanaal bevatten dat ondersteunende browsers tonen. Standaard MP4 met H.264 kan dat niet.