MP4 vs WebM: which video format to export

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.

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.

For the full list of frames by platform, see social media 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.

<video autoplay muted loop playsinline
       width="1920" height="1080" poster="loop-poster.jpg">
  <source src="loop.webm" type="video/webm">
  <source src="loop.mp4" type="video/mp4">
</video>

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 is the reference for what each browser plays. If the clip is a background, video backgrounds on websites 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.

# 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

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.

The causes and fixes for still images are in 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, and the craft of making a good one is in animated GIFs.

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.