How to Convert a GIF to Video: MP4 and WEBM Conversion
6 min read
You have a GIF and you're going to put it on your website. The file is 6 MB and the page loads slowly. Or you need to bring a GIF into a video editing project. Converting from GIF to video answers both needs and usually delivers a dramatic size reduction.
Why you'd convert a GIF to video
File size. GIF uses an inefficient compression scheme left over from 1987 and exploits inter-frame redundancy only in a primitive way. The same content as MP4 typically takes a tenth of the space. A 6 MB GIF becomes a 500 KB MP4.
Page speed. Large GIFs noticeably delay page loading on mobile connections. Search engines also use page speed as a ranking signal.
Editing. Video editing programs can struggle to import GIF directly or may misinterpret the frame rate. Converting to a video format fixes the workflow.
Platform requirements. Some social media platforms and content management systems want video.
Step 1: Set the right expectation
Let's state an important fact up front: conversion does not improve quality.
Your GIF has already been reduced to 256 colors and that color information doesn't come back. The video format supports full color, but because your source has 256 colors the result looks like 256 colors too. Banding and blotchiness remain exactly as they were.
The gain is in file size, not quality. And that gain is usually large.
Also, if the conversion targets a lossy video codec (H.264, VP9) there's a very small additional loss. With a sufficient bitrate that's unnoticeable — especially since the source is already 256 colors, which makes the codec's job easy.
Step 2: Choose the target format
MP4 (H.264): the safest choice. Every browser, every device, every platform supports it. When in doubt, pick this.
WEBM (VP9): roughly 30% smaller than MP4 at the same quality. Every modern browser supports it. Ideal if you're using it on your own site.
The best approach is to produce both and let the browser choose:
<video autoplay muted loop playsinline>
<source src="animation.webm" type="video/webm">
<source src="animation.mp4" type="video/mp4">
</video>
The browser uses the first source it supports: modern browsers take WEBM, older ones MP4.
Step 3: Convert
Open the GIF to video converter, upload your GIF and pick the target format. The processing runs in your browser; your file never goes to a server.
There are two technical matters handled behind the scenes during conversion:
The even-number rule. Codecs like H.264 store color information at half resolution horizontally and vertically (4:2:0 chroma subsampling). That requires width and height to be even numbers. GIFs have no such constraint, so dimensions like 401×267 are common. The converter usually fixes this by cropping or padding a single pixel — an intervention you won't see visually.
Frame rate normalization. In a GIF each frame has its own delay, so the frame rate can change from frame to frame. Video generally expects a constant frame rate. The converter picks a target frame rate and distributes the frames accordingly.
If the source delays are irregular, a slight timing difference can appear. For a critical animation (an interface demo, say) it's worth comparing the output against the original.
Step 4: Check the result
Is the duration the same? Small differences can appear during the frame rate conversion.
Is the motion speed right? If your GIF uses irregular delays, the video plays at a constant rate and the rhythm can change. If it feels sped up or slowed down, change the frame rate setting and try again.
Do the first and last frames match up? Because the GIF played in a loop, its start and end were close to each other. When the video is looped, the same smoothness should hold.
Is there any visual degradation? If the bitrate is too low, block artifacts can appear in areas with motion. This is rare with GIF-sourced video because the source is already simple, but check anyway.
How big is the size gain? Typically expect a 5-10x reduction. If the reduction is small, the bitrate may have been set unnecessarily high.
Step 5: Use it correctly on the web
The attributes you need to make video behave like a GIF:
| Attribute | What it does |
|---|---|
| autoplay | Plays by itself when the page opens |
| muted | Silent — without it browsers won't allow autoplay |
| loop | Infinite loop |
| playsinline | Stops it going full screen on mobile |
| poster | The image shown until the video loads |
The muted attribute is critical: browsers block autoplay with sound, and without muted, autoplay won't work.
playsinline is mandatory on mobile too; without it iOS Safari opens the video full screen and the GIF-like behavior breaks.
A note on user experience: videos that play automatically bother some users. For long or distracting animations, giving the user control with the controls attribute may be the better choice.
When to leave it as a GIF
Conversion isn't right in every scenario:
If you're using it in email. Almost no email client plays video. It has to stay a GIF there.
In older forum or wiki systems. These environments usually only support image tags.
In the GIF libraries of messaging apps. Some apps treat GIF as a special case.
For very small files. The gain from converting a 100 KB GIF to video may not be worth the added complexity.
If you need a transparent background. Video formats don't practically support alpha transparency. GIF's transparency is binary (on/off) but at least it exists. For better transparency, consider animated WEBP or APNG.
Bulk conversion
If your site has a lot of GIFs, converting them all delivers a serious gain. The approach:
1. Take inventory. Which GIFs are used where, and how big are they?
2. Prioritize. Start with the largest files; the gain is proportional.
3. Produce both. The WEBM plus MP4 pair gives you efficiency and compatibility.
4. Update the HTML. Turn <img src="x.gif"> tags into <video> blocks.
5. Keep a backup. Don't delete the GIFs right away; keep them for a while so you can go back if something goes wrong.
The difference usually shows up immediately in page speed measurements — especially on mobile connections.
In summary
Converting from GIF to video doesn't improve quality (the 256-color limit has already been applied) but typically delivers a tenfold gain in file size. MP4 is the safest target; if you're using it on your own site, serving it alongside WEBM gives the best result. Rounding the resolution to even numbers and normalizing GIF's variable frame delays to a constant frame rate are handled behind the scenes during conversion — the latter can create a slight timing difference in critical animations, so check the output. For GIF-like behavior on the web, use the autoplay muted loop playsinline attributes. For email, older forums and situations requiring transparency, leaving the GIF as it is remains the right call.
Frequently Asked Questions
Does converting a GIF to video improve quality?
No, it doesn't — but you don't lose anything either. Because the GIF has already been reduced to 256 colors, that color information doesn't come back. The video format supports full color, but since your source has 256 colors the result looks like 256 colors too. The gain isn't in quality, it's in file size: the same picture typically takes a tenth of the space.
Do autoplay and looping disappear when I convert to video?
The file itself carries no loop information, but you get it in HTML in a single line: adding the autoplay muted loop playsinline attributes to the video element gives you exactly the same behavior as a GIF. Browsers allow silent videos to autoplay, and playsinline stops it from going full screen on mobile.
The conversion gives an 'odd resolution' error — why?
Video codecs like H.264 store color information at half resolution horizontally and vertically (4:2:0 chroma subsampling), and that requires the width and height to be even numbers. GIFs have no such constraint, so dimensions like 401×267 are common. The converter usually fixes this automatically by cropping or padding a single pixel.
My GIF has an irregular frame rate — how does that carry over to video?
In a GIF every frame has its own delay, so the frame rate can change from frame to frame. Video generally expects a constant frame rate. The converter picks a target frame rate and distributes the frames accordingly. If the source delays are irregular, a slight timing difference can appear; for a critical animation you should check the output.
Try this out right away with GIF → Video.
Try GIF → Video