# MP4 vs WebM: which video format to export [Canonical HTML page](https://gradiently.design/guide/mp4-vs-webm) Two containers, a handful of codecs and one practical question: which file do you hand to Instagram, and which do you put on your website. ## The short version - MP4 is the safest video format to export because it plays on almost every phone, browser, editor and social platform. - WebM is an open, royalty free format that is often smaller than MP4 at similar quality, which makes it useful on websites. - For social media uploads, export MP4, because platforms reliably accept it and re-encode everything anyway. - On a website, a common pattern is to offer WebM first and MP4 as a fallback inside one video element. - WebM can carry transparency in browsers that support it, which ordinary MP4 with H.264 cannot. In the **MP4 vs WebM** choice, export MP4 when you are uploading anywhere you don't control, such as Instagram, TikTok, LinkedIn, a client's inbox or a video editor, because it plays almost everywhere. Choose WebM for your own website, where it is often smaller at the same quality, and ideally offer both so each browser picks the one it plays best. That covers most decisions. The rest of this page explains why, and the few cases where the answer changes. ## What MP4 and WebM actually are Both are **containers**: boxes that hold a video stream, an audio stream and some information about them. What decides quality and size is the **codec** inside. MP4 usually carries H.264 video and AAC audio, sometimes H.265 or AV1. WebM carries VP8, VP9 or AV1 video with Opus or Vorbis audio. WebM was created as an open, royalty free format for the web; MP4 is the long established standard that cameras, phones and editing software were built around. | Feature | MP4 | WebM | | --- | --- | --- | | Usual video codecs | H.264, H.265, AV1 | VP8, VP9, AV1 | | Usual audio codecs | AAC | Opus, Vorbis | | File size | Small | Often smaller at similar quality | | Plays on | Almost everything | Modern browsers; patchier in apps and editors | | Social uploads | Accepted everywhere | Not reliably accepted | | Transparency | Not with H.264 | Yes, with VP9 in supporting browsers | | Licensing | Some codecs carry patent licensing | Open and royalty free | The broad picture. Support shifts over time, so check current browser support on caniuse before relying on an edge case. ## Which format for social media Export MP4. Every major platform accepts it, and every platform re-encodes what you upload, so a smaller WebM gains you nothing once it is there. The things that actually change how your video looks after upload are the frame size, the frame rate and the quality of the file you send. Send a clean 1080×1920 MP4 for Reels and stories, or 1080×1350 for a portrait feed post, and the platform has nothing to rescale. - Reel, story, TikTok 9:16: 1080 × 1920 - Portrait post 4:5: 1080 × 1350 - Square post 1:1: 1080 × 1080 - Landscape 16:9: 1920 × 1080 The frames you will export most often. Every one of them should go up as MP4. For the full list of frames by platform, see [social media video sizes](https://gradiently.design/guide/social-video-sizes). ## Which format for a website On your own site you control the player, so you can offer both. The browser reads the `source` elements in order and plays the first one it supports. Put WebM first if your WebM file is the smaller of the two, and keep MP4 as the fallback for any browser that can't play it. ```html ``` WebM first, MP4 as the fallback. The poster shows while the video loads and for anyone whose browser can't play either. Measure before you assume. For some clips, especially very short or very simple ones, a well encoded MP4 is as small as the WebM, and serving one file is simpler. MDN's guide to [web video codecs](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Video_codecs) is the reference for what each browser plays. If the clip is a background, [video backgrounds on websites](https://gradiently.design/guide/video-background-website) covers poster images, sizing and performance. ## Converting between MP4 and WebM If you have one format and need the other, the free command line tool FFmpeg handles both directions. The commands below are sensible starting points for designed loops: no audio, good quality, and an MP4 that starts playing before it has fully downloaded. ```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 ``` Lower CRF means higher quality and bigger files. Remove -an if the video has sound you want to keep. > **Why yuv420p matters** Some encoders produce MP4 files in a colour format that phones and browsers refuse to play. Setting `yuv420p` keeps the file in the format everything understands. ## Gradients, banding and quality Soft gradients are the hardest thing to compress. Large areas of slowly changing colour expose any shortage of bits as visible steps, and dark gradients show it first. Both formats handle this well at a generous quality setting; neither does at a stingy one. A touch of grain in the design helps a lot, because encoders preserve texture rather than flattening it into bands. - Smooth: enough bitrate: `linear-gradient(180deg, #0b1026 0%, #1e3a8a 55%, #60a5fa 100%)` - Stepped: starved encoder: `linear-gradient(180deg, #0b1026 0% 20%, #13234f 20% 40%, #1e3a8a 40% 60%, #3f6fc4 60% 80%, #60a5fa 80% 100%)` An exaggerated view of banding. The fix is the same in MP4 and WebM: more quality, a little grain, and no extra rescaling. The causes and fixes for still images are in [gradient banding](https://gradiently.design/guide/gradient-banding). The animated version adds one more rule: export at the exact size you will publish, so nothing gets scaled twice. ## Where GIF fits in GIF is not a video format and is the largest of the three for the same loop, with a 256 colour limit that bands gradients. Its one stronghold is email, where most inboxes show GIFs and very few play video. The three way comparison is in [GIF vs MP4](https://gradiently.design/guide/gif-vs-mp4), and the craft of making a good one is in [animated GIFs](https://gradiently.design/guide/gif-maker-tips). ### Export MP4 for - Instagram, TikTok, LinkedIn, X, YouTube - Sending to a client or an editor - Presentations and screens you don't control - Any time you are unsure ### Export WebM for - Your own website, alongside an MP4 - Overlays that need transparency in the browser - Pages where every kilobyte counts - Browser based tools that record WebM natively In Gradiently, video exports are a Pro feature and come out as MP4 or WebM, depending on what your browser can record. Either way you get the moving Mark behind your words at up to 1080p, ready to upload or embed. The details are in [export images and loops](https://gradiently.design/guide/export-images-and-loops). ## FAQ ### Is WebM better than MP4? WebM is often smaller at similar quality and is open and royalty free, but MP4 plays on far more devices and apps. For websites WebM is a good first choice with MP4 as a fallback; for everything else MP4 is safer. ### Can I upload WebM to Instagram or TikTok? Don't rely on it. Convert to MP4 first, which every platform accepts, at the exact frame size of the format you are posting. ### Does Safari play WebM? Recent versions of Safari play WebM, but support arrived later than in other browsers and has varied by codec and device. Offering an MP4 fallback avoids the question. ### Which is smaller, MP4 or WebM? WebM with VP9 or AV1 is often smaller than MP4 with H.264 at similar quality, but not always. Encode both and compare the actual files. ### Which format supports transparent video? WebM with VP9 can carry an alpha channel that supporting browsers display. Standard MP4 with H.264 cannot.