How to convert a GIF to MP4, and why the video is smaller

Converting a GIF to MP4 usually makes it several times smaller and lets you post it on platforms that refuse GIFs. In Google's web.dev example, a 3.7 MB GIF became a 551 KB MP4 and a 341 KB WebM. GIF to video does the conversion in your browser, and this guide explains how it works, which settings matter and where a desktop tool is the better choice.

Why video beats GIF

A GIF compresses each frame on its own with LZW, which is lossless and limited to 256 colours per frame. Modern video codecs such as H.264, VP9 and AV1 work differently: they store occasional complete frames and, in between, mostly describe what moved, reusing everything that did not. In a typical animation most pixels barely change from one frame to the next, so video wins by a wide margin, and it keeps full colour while doing so. The gap is largest for long, detailed or photographic GIFs; a tiny icon animation with a handful of flat-colour frames may shrink only a little, and occasionally not at all. Why GIFs are so big, and when a muted video is the better choice covers in more detail why the GIF side of that comparison loses.

How the browser conversion works

Browsers can decode and play a GIF but have no built-in function to turn one into a video file. What they do have is a canvas that can be captured as a live video stream, and the MediaRecorder interface, which encodes such a stream into a file. The converter combines the two:

  • it reads the GIF's dimensions, frame count and duration directly from the file;
  • it plays the GIF onto a canvas, redrawing it on every screen refresh;
  • it captures that canvas at 30 frames per second and records it at about 4 Mbps;
  • when the planned running time is reached it stops and gives you the file.

The honest consequence is that recording happens in real time: a ten-second result takes ten seconds. Keep the tab visible while it runs, because browsers slow down hidden tabs. Timing follows the browser's GIF playback, which is close but not frame-exact; for frame-perfect conversion of a large batch, a desktop tool such as FFmpeg is the right choice, and web.dev documents the commands.

Repeats, background and size

  • Play the GIF (times), 1 to 20, default 3. A GIF loops forever; a video plays once unless the player loops it. A 1.5-second GIF makes a 1.5-second video that looks broken in a player that does not loop, so repeating the animation a few times gives a clip of sensible length.
  • Background colour. GIFs can have transparent pixels, but MP4 video with the usual H.264 codec has no transparency, so transparent areas are filled with a colour you pick. Match it to where the video will appear.
  • Size: up to 1080, 720 or 480 pixels on the longer side. Dimensions are rounded to even numbers, because H.264 stores colour at half resolution and needs even widths and heights.

MP4 or WebM

The converter asks the browser which formats it can record and prefers MP4. Safari and recent versions of Chrome and Edge record MP4 with H.264; Firefox records WebM, with VP9 or VP8. Both play in every modern browser, but some apps and editing programs still expect MP4. If you get a WebM and need an MP4, WebM to MP4 re-encodes it on your device with H.264. WebM vs MP4: containers, codecs, and which one to send explains the difference between the two containers.

Using the video in place of a GIF

On your own website you can make a video behave exactly like a GIF. A GIF plays automatically, loops and is silent; a video element given the autoplay, loop, muted and playsinline attributes does the same, and browsers allow muted video to autoplay. Offering a WebM and an MP4 source covers every browser. Most social and chat platforms already do this behind the scenes: upload a GIF and what viewers receive is often a video. If you only need a still, GIF to PNG saves the first frame, and GIF info shows the frame count and duration before you convert. The converter uploads nothing.

Sources and further reading

The claims in this guide rest on these references, which were checked when the guide was last updated. Spotted an error? The contact page says how to report it.

  1. Replace animated GIFs with video for faster page loads โ€” web.dev
  2. MediaRecorder โ€” MDN Web Docs
  3. HTMLCanvasElement: captureStream() โ€” MDN Web Docs

Try the tool

Frequently asked questions

Is MP4 smaller than GIF?

Usually much smaller. In one published example a 3.7 MB GIF became a 551 KB MP4, because video codecs store mainly what changes between frames.

Why does the conversion take as long as the video?

The browser records the GIF as it plays onto a canvas, so recording runs in real time.

What happens to transparency in a GIF converted to MP4?

MP4 video with H.264 has no transparency, so transparent areas are filled with a background colour you choose.

Why did I get a WebM file instead of MP4?

Some browsers, notably Firefox, can only record WebM. A WebM to MP4 converter can re-encode it.