Why convert a GIF to video
GIF is an old format for animation: every frame is a separate picture with at most 256 colors, compressed without loss. A video codec such as H.264 works differently. As MDN's guide to video codecs explains, it stores full key frames only now and then and otherwise records the differences from one frame to the next. That is why Chrome's Lighthouse documentation calls large GIFs inefficient for animated content and recommends converting them to MP4 or WebM video to save bandwidth.
- Websites: a video in place of a big GIF makes a page lighter. The markup
<video autoplay loop muted playsinline>makes it start by itself, loop and stay silent like a GIF. - Sharing and uploading: for upload forms that take video but not GIF, and a smaller file is quicker to send.
- Editing: a video editor can cut, slow down or combine the animation with other clips.
The tool shows the size of the GIF and of the video side by side when it is done, so you can see what the conversion saved for your file. A very small GIF with only a few frames may not shrink much.
What the converter does
The tool reads the GIF itself, following the GIF89a specification: it decodes the compressed pixel data, places every frame at its position and handles the disposal methods that say whether the previous frame stays, is cleared or is restored. The finished frames are then encoded as video with the WebCodecs video encoder in your browser, through the mediabunny library.
- Timing: every frame keeps its own delay, so animations with uneven timing stay as they were. Frames that ask for 0 or 0.01 seconds are shown for 0.1 seconds, which is what Chrome and Safari do when they play such a GIF.
- Transparency: GIF marks single colors as fully transparent. The video this tool writes is opaque, so those pixels get the background color you pick.
- Even size: the H.264 setup used here needs an even width and height. An odd size gets one more column or row, filled by repeating the edge pixels.
- Quality: the video is re-encoded with a lossy codec. Sharp pixel edges and fine dithering can soften a little; Very high keeps more detail and makes a larger file.
Looping: GIF versus video
A GIF can store how often it plays, and most GIFs are set to loop forever. The tool shows the setting of your GIF after you open it. It does not write a loop setting into the video, so the player decides: on a web page the video element needs the loop attribute, and video apps have their own repeat button. If the animation should play several times wherever the file is opened, set Repeat the animation. The tool then writes the animation that many times one after the other, and the video becomes that many times as long.
Browsers, phones and formats
The conversion needs the WebCodecs VideoEncoder. According to MDN's compatibility data it is in Chrome and Edge 94 and later, Firefox 130 and later on the desktop, and Safari 16.4 and later, which includes Safari on iPhone and iPad. Firefox for Android does not have it. Which codecs the encoder supports depends on the browser and the device, so the tool asks your browser when you open a GIF and picks the first one that works:
| Your browser can encode | You get |
|---|---|
| H.264 | An MP4 file with H.264 video |
| VP9, but not H.264 | A WebM file with VP9 video |
| VP8 only | A WebM file with VP8 video |
| None of these | A message, and no file |
The tool reads GIFs with its own decoder instead of the browser's WebCodecs ImageDecoder, because MDN lists no ImageDecoder in Safari, so the same code runs on iPhone, iPad and every other device. Sizes on this page count 1 MB as 1,024 × 1,024 bytes.
How to convert a GIF to MP4
- 1Drop an animated GIF on the box, or tap it to choose one. Try the sample GIF to see how it works.
- 2Check the size, frame count and length, then pick how often the animation repeats, the quality and, for transparent GIFs, the background color.
- 3Press Convert to MP4, watch the preview and compare the sizes.
- 4Name the file and press Download MP4.
Need the opposite? The video to GIF converter turns a clip of a video into a GIF. For a still picture of the first frame, use GIF to PNG.
Open-source libraries
The video is written with mediabunny (MPL-2.0). The sample GIF is made with gifenc (MIT).
Sources
- Chrome for Developers: Use video formats for animated content: large GIFs are inefficient, convert them to MP4 or WebM, video markup that acts like a GIF
- MDN: Web video codec guide: video compression records the differences between frames, with periodic key frames
- GIF89a specification: frame delays, disposal methods, transparent color index, 256-color tables
- Chromium source and WebKit source: frames of 10 ms or less are shown for 100 ms
- Wuffs GIF decoder: how the stored loop count is read
- MDN: VideoEncoder browser compatibility and ImageDecoder browser compatibility
- mediabunny source: H.264 encoding needs an even width and height
Frequently asked questions
Is my GIF uploaded?
No. Your browser reads the GIF and writes the video on your own device. Nothing is sent to a server.
Will the MP4 be smaller than the GIF?
Usually, and large GIFs gain the most: a video codec records mostly the differences between frames, and Chrome's Lighthouse documentation recommends turning large GIFs into video to save bandwidth. The result depends on the GIF, so the tool shows the size before and after for your file.
Why does the video not loop like the GIF?
A GIF stores how often it plays. This tool writes no loop setting into the video, so whether it starts over depends on the player: a web page needs the loop attribute on its video element, and apps have their own setting. To make the animation run several times inside the file, set Repeat the animation.
What happens to transparent parts?
The video this tool writes is opaque, so transparent pixels are filled with the background color you choose, white by default.
Does the video look exactly like the GIF?
Close, but not pixel for pixel. The frames are re-encoded with a lossy video codec, which can soften sharp pixel edges and fine dithering a little. Choose Very high quality for pixel art or text. The timing of every frame is kept, except that frames of 0 or 0.01 seconds get 0.1 seconds, as in Chrome and Safari.
Why is my video a pixel wider than the GIF?
The H.264 encoder setup used here needs an even width and height. A GIF with an odd width or height gets one extra column or row that repeats the edge pixels, so nothing new shows.
Does it work on iPhone?
On iPhone and iPad it needs Safari 16.4 or later, which has the WebCodecs video encoder. Firefox for Android has no video encoder, so it cannot write the video there. The tool checks this when you open a GIF and tells you if your browser cannot do it.