Do I need to produce both MP4 and WEBM?

If you're using it on your own website, yes, because serving both gives you efficiency and compatibility at once. Modern browsers take the smaller WEBM, older ones fall back to MP4. If you have to pick a single file, MP4 is safer — it works everywhere. WEBM's only advantage is file size, and that's typically around 20-30%.

What happens to my transparent GIF if I convert it to video?

The transparency is lost. Common video codecs don't carry an alpha channel, and transparent pixels usually get filled with black or white. If transparency has to be preserved, choose animated WEBP or APNG instead of video; both support 8-bit alpha and give better results than GIF's binary transparency.

Is animated WEBP as small as video?

No, it's usually two to three times larger. But it's roughly a third the size of GIF and it preserves transparency. So the ordering goes: video smallest, WEBP in the middle, APNG larger, GIF largest. If transparency isn't needed, video is always more efficient.

Should I delete my GIF files after conversion?

Don't delete them right away. Keep them for a while, because some environments may still require GIF — email newsletters, older forum posts, certain content management systems. And if you notice a problem with the conversion you'll need to go back to the source. If you did a site-wide bulk conversion, you can archive them after a few trouble-free weeks.

Should You Convert a GIF to MP4 or WEBM? A Target Format Comparison

You've decided to convert your GIF. Now comes the target question: MP4, WEBM, animated WEBP, or APNG? All four are smaller than GIF and all four make different trade-offs. This article looks at which one is right in which situation.

The four target formats in brief

MP4 (H.264): the most widespread video format. Universal support.

WEBM (VP9): an open video format. Smaller than MP4 at the same quality, supported in modern browsers.

Animated WEBP: behaves as an image format (used with the <img> element), supports full color and alpha transparency.

APNG: the animated version of PNG. Full color, 8-bit alpha, behaves as an image.

Comparison table

For a 5-second, 480×270, 15 fps GIF, roughly:

| Criterion | GIF (source) | MP4 | WEBM | Animated WEBP | APNG | |---|---|---|---|---|---| | Typical size | 4 MB | 400 KB | 300 KB | 1.2 MB | 2.5 MB | | Alpha transparency | Binary | None | None | 8-bit | 8-bit | | HTML element | <img> | <video> | <video> | <img> | <img> | | Autoplay | Native | Attribute | Attribute | Native | Native | | Browser support | Universal | Universal | Modern | Modern | Modern | | Email support | Good | None | None | None | Weak | | Full-resolution chroma | Yes | No (4:2:0) | No (4:2:0) | Yes | Yes |

That last row matters: video formats store color information at half resolution (4:2:0 chroma subsampling), which creates slight blurring on sharp colored edges. WEBP and APNG don't do this.

Scenario 1: A product animation on a website

It'll play automatically on the page, no transparency needed.

Winner: WEBM plus MP4 together.

<video autoplay muted loop playsinline poster="preview.jpg">
  <source src="animation.webm" type="video/webm">
  <source src="animation.mp4" type="video/mp4">
</video>

Modern browsers take the smaller WEBM, older ones fall back to MP4. Producing two files is a small amount of extra work but gains you both efficiency and compatibility.

If you have to pick just one file, take MP4; WEBM's advantage is a 20-30% size difference, and that may not be worth the compatibility risk.

Scenario 2: A logo animation with a transparent background

The page content behind it needs to show through.

Winner: animated WEBP.

Video formats don't practically support alpha transparency. In this scenario MP4/WEBM are ruled out entirely.

WEBP vs APNG:

| Aspect | Animated WEBP | APNG | |---|---|---| | File size | Smaller | 2-3 times larger | | Browser support | Modern browsers | Slightly broader | | Lossy option | Yes | No (always lossless) |

WEBP is usually the better choice because its lossy mode produces much smaller files and modern browser support is sufficient.

The case for APNG: when lossless quality is genuinely required (say, a pixel-perfect interface animation) and file size is a secondary concern.

Both are far better than GIF's binary transparency — with 256 transparency levels they give smooth edges, without GIF's jagged fringes.

Scenario 3: A screen recording animation (interface demo)

A recording showing how a piece of software is used, containing text.

Winner: WEBM or animated WEBP — watch the chroma issue.

In this scenario chroma subsampling can be a genuine problem. Video codecs store color information at half resolution, and that creates blurring on sharp colored text edges. Small-type interface text can become unreadable.

There are two solutions:

1. Use a high resolution. If the text sits on enough pixels, the chroma softening goes unnoticed. Keep the screen recording at its original resolution.

2. Use WEBP. WEBP keeps full color resolution and applies no chroma subsampling. Text stays sharp. The file is larger than video, but if legibility is critical it's worth it.

Some video encoders support the 4:4:4 profile (full chroma resolution). Use it if available, but test browser support.

Scenario 4: An email newsletter

Winner: GIF — don't convert.

Almost no email client plays video. WEBP and APNG support is weak too.

Leave the GIF as it is but optimize its size: shorten the duration (2-3 seconds), lower the resolution (300-400 px), reduce the frame rate (10 fps), and drop the color count to 128 if needed.

And an important note: some email clients (certain Outlook versions in particular) show only the first frame of a GIF. Design that first frame to be meaningful on its own.

Scenario 5: A step-by-step demo in a blog post

A short animation showing how something is done.

Winner: MP4/WEBM video — but think about user control.

There's a user experience choice in this scenario. An animation that plays automatically can distract the reader while they're still reading the text, and looping over and over can be irritating.

The alternative: give the user playback control with the controls attribute and don't use autoplay. They start it when they're ready, can pause and can rewind.

For long or information-dense animations that's usually the better choice. For short, decorative animations, autoplay is fine.

Scenario 6: Bulk site optimization

Your site has dozens of GIFs and you're going to convert them all.

Winner: WEBM plus MP4, with a systematic approach.

The order of operations:

1. Take inventory. Which GIFs are where, and how big are they? Start with the largest files; the gain is proportional.

2. Separate the ones that need transparency. Those should go to WEBP, not video.

3. Produce pairs for the video targets. WEBM plus MP4.

4. Update the HTML. Turn <img src="x.gif"> tags into <video> blocks. Add the poster attribute.

5. Measure. Do a before-and-after comparison with page speed tools. The difference is usually visible immediately.

6. Don't delete the GIFs right away. Keep them for a few weeks; if you notice a problem you'll want to be able to go back. And you may still need them in email newsletters.

Quality settings

Whichever format you choose, the settings matter:

For MP4/WEBM: use CRF (constant rate factor). The 18-23 range is common for H.264 and 28-33 for VP9 (lower value means better quality). With GIF-sourced video the source is already simple, so even higher quality settings stay at reasonable sizes.

For WEBP: a quality value between 75 and 90 is a good balance for most content. There's a lossless mode too, but the file grows noticeably.

Common to both: don't increase the resolution. If your GIF is 400 pixels wide, making the video 800 pixels adds no detail, it only grows the file.

Decision summary

Decide with three questions:

1. Is transparency needed? Yes → animated WEBP (or APNG if lossless is required).

2. Is it email or an older forum environment? Yes → leave it as a GIF, just optimize it.

3. Every other case → WEBM plus MP4 together. If a single file has to be chosen, MP4.

One extra note: on screen recordings with sharp text, video formats' chroma subsampling can hurt legibility. In that case keep the resolution high or switch to WEBP.