Transparent Video Formats Explained: WebM, MOV, GIF, and MP4 With Alpha

What “transparent” means inside a video file

A normal video frame stores three values per pixel: how much red, green, and blue. A transparent video stores a fourth value, the alpha channel, which records how opaque that pixel is. An alpha of 100% means the pixel is solid; 0% means it is invisible and whatever sits behind the video shows through; anything between is a partial blend. That in-between range is what makes soft edges, hair, motion blur, and drop shadows look right when a character sits on top of a web page or a piece of footage.

Two details of alpha matter more than people expect:

• Bit depth. Video codecs store alpha with 8 or more bits, so a pixel can be one of at least 256 levels of opacity. GIF stores exactly one bit: a pixel is either fully visible or fully gone. That is why a GIF of a rounded character always has a slightly crunchy outline against a coloured background.
• Straight versus premultiplied. With straight alpha, the colour of a semi-transparent pixel is stored at full strength and the alpha decides how much of it to show. With premultiplied alpha, the colour has already been multiplied by its opacity. If a tool reads one as the other, you get a dark or light fringe around every edge. Browsers handle this for you; video editors sometimes ask.

The important consequence: transparency is a property of the codec, not the file extension. A .mov file can be transparent or not depending on what is inside it, and a .mp4 almost never is. Everything below follows from that.

The four formats, and what is actually inside them

People say “WebM”, “MOV”, “GIF”, and “MP4” as if they were four codecs. They are three containers and one image format, and the codec inside decides whether alpha survives.

WebM is the web’s transparent format. VP9 encodes the alpha as a separate plane alongside the colour data, compressed with the same motion-prediction tricks as the picture, which is why it stays small. Chromium browsers and Firefox decode it natively.

MOV is really two different things. A ProRes 4444 MOV is a production intermediate: every frame is stored independently at 10-bit colour with a high-quality alpha, files are large, and every serious editor reads it without conversion. An HEVC with alpha MOV is Apple’s delivery format: small, playable in Safari and on iOS, but only encodable with Apple’s own tools. The studio exports the ProRes flavour because it is the one editors want; the editor guide covers how each application treats it.

GIF predates the web. Each frame is a palette of at most 256 colours, one of which can be marked transparent. There is no inter-frame compression beyond simple frame differencing, no partial opacity, and no audio. It survives because it is an image, so it can go anywhere an image can: a Slack message, a Notion page, a PowerPoint slide, an email, a GitHub README.

MP4 is the format that plays on every device ever made, and that is precisely because it stays simple. H.264 has no alpha channel in any widely deployed profile. If someone hands you a “transparent MP4”, it is either a mislabelled MOV, a video with a green or black background meant to be keyed out, or an MP4 that carries a second, separate alpha video stacked beside the picture for a custom player to combine (the trick some JavaScript libraries use).

Where each format actually plays

This is the part that causes most of the surprise. Support for transparent playback splits along vendor lines, and it has for years.

Two things are worth knowing about the Safari row. First, Apple added HEVC-with-alpha playback to Safari years ago and it works well, but the encoder lives only in macOS and iOS (Finder, Compressor, or the avconvert command line tool), so producing it from Linux servers or Windows machines is impractical. Second, WebKit has been adding VP9 alpha decoding; it appeared in Safari 27 betas with open issues, and until it ships in a release you cannot rely on it. Treat “Safari plays transparent WebM” as a future fact, not a present one.

The practical consequence for the web is simple: serve WebM to everyone, and either accept an opaque or GIF fallback for Safari or produce an HEVC MOV for it. The website embedding guide shows the markup for both strategies and how to keep the page fast while doing it.

File size and quality on real exports

Instead of quoting a generic “GIFs are 10× bigger” figure, here are three finished animations from the studio, measured directly. Each WebM is a square 720×720 clip at 24 frames per second, six seconds long, VP9 with alpha. Each GIF is the same animation scaled to 480 pixels wide, which is the studio’s GIF size.

Note the direction of that comparison: the GIF is smaller in pixels (480 versus 720 wide, roughly 44% of the pixel count) and still three to four times heavier on disk, at lower quality. The gap widens with longer clips and with soft-shaded characters, because GIF’s 256-colour palette has to dither every gradient and its frame differencing gives up as soon as most of the frame moves.

Where does the WebM size go? Mostly into the alpha plane and into detail: a painterly 3D-style character with fur and shading is far more expensive to encode than flat vector shapes. Two levers reduce it without visible loss: a slightly higher CRF value when you re-encode (a range of 30 to 36 is usually invisible for a UI-sized character), and simply displaying the video smaller than 720 pixels, which you were probably going to do anyway.

ProRes 4444 goes the other way. Because it compresses each frame on its own at 10-bit colour with a near-lossless alpha, a six-second 720p clip typically lands somewhere between 30 and 80 MB. That is not a flaw; it is the point. An editor can scrub it frame by frame without decoding neighbours, colour-grade it without banding, and re-export it a dozen times without generational loss. You would never serve it to a browser, and you never need to.

Choosing a format by destination

If you only remember one list, make it this one.

• Website or web app: WebM, in a muted looping <video>. Add a GIF or HEVC fallback for Safari if the character is central to the page.
• Video editing and motion graphics: ProRes 4444 MOV. It drops onto a track above your footage with its alpha intact.
• Slides, documents, chat, email, README: GIF. It is the only one of the four that behaves like an image everywhere.
• Social media and messaging previews: MP4. Feeds re-encode everything anyway, and none of them honour transparency.
• Streaming overlays: WebM as an OBS Media Source; MOV if your machine has the codecs and you want the extra quality. The OBS guide walks through the setup.
• iOS or macOS native apps: HEVC with alpha, converted from the ProRes MOV on a Mac.

If you are weighing transparent video against Lottie or a sprite sheet for interface animation, that is a different decision with different trade-offs, covered in Lottie vs GIF vs transparent video.

Converting between formats without losing the alpha

Start from the highest-quality source you have, which is the ProRes MOV. Every command below uses FFmpeg except the HEVC step, which needs a Mac.

ProRes MOV to transparent WebM

ffmpeg -i character.mov \
  -c:v libvpx-vp9 -pix_fmt yuva420p \
  -b:v 0 -crf 32 -row-mt 1 -auto-alt-ref 0 \
  -an character.webm

-pix_fmt yuva420p is the line that keeps the alpha; leave it out and you get an opaque video on black. -auto-alt-ref 0 avoids a long-standing libvpx limitation with alpha in some builds. Raise -crf toward 40 for smaller files, lower it toward 24 for a hero-sized character.

ProRes MOV to HEVC with alpha (macOS only)

avconvert --preset PresetHEVCHighestQualityWithAlpha \
  --source character.mov --output character-hevc.mov

The same result is available in Finder: select the ProRes file, right-click, choose Encode Selected Video Files, pick an HEVC setting and tick Preserve Transparency. Serve the result with type="video/mp4; codecs=hvc1" so Safari recognises it.

Transparent WebM to a transparent GIF

ffmpeg -i character.webm -vf \
  "fps=15,scale=480:-1:flags=lanczos,split[a][b];[a]palettegen=reserve_transparent=1[p];[b][p]paletteuse=alpha_threshold=128" \
  character.gif

The two-pass palette filter is what makes a GIF look acceptable; a single-pass conversion picks a generic palette and the character comes out speckled. alpha_threshold decides which semi-transparent pixels become solid; lower it if edges look eaten away, raise it if a faint halo appears.

Any transparent video to a PNG sequence

ffmpeg -i character.mov -pix_fmt rgba frames/frame_%04d.png

A PNG sequence is the universal escape hatch: game engines, sprite sheet packers, APNG tools, and stubborn editors all accept it. It is large on disk but lossless, and it is the input you want if you plan to build a sprite sheet.

Symptoms and what they mean

• The character has a solid black (or white) box behind it. The alpha was discarded somewhere: usually an encoder without yuva420p, a player that cannot decode alpha (Safari with WebM), or an upload to a platform that re-encodes to MP4.
• A thin dark or light outline follows every edge. A premultiplied/straight mismatch. In an editor, change the alpha interpretation of the clip; on the web, re-encode from the original MOV rather than from a previous export.
• Edges look jagged or sparkly in the GIF. Expected with 1-bit alpha. Place the GIF on a background close to the colour it was exported against, or use the WebM where the platform allows video.
• The video plays in Chrome but not on an iPhone. iOS has no VP9 alpha decoder. Add an HEVC source first in the <video> element, or fall back to the GIF.
• The file is enormous. You are looking at the ProRes MOV. It is meant for editors; export or convert to WebM for delivery.
• Colours shifted after conversion. Most often a colour-range flag (limited versus full) or a 10-bit to 8-bit downconversion without dithering. Adding -color_range 1 and letting FFmpeg pick the swscale dither usually settles it.

Short answers to common questions

Is there such a thing as a transparent MP4? Not in any format browsers or editors decode natively. Use WebM for the web, MOV for editors.

Does WebM lose quality compared to MOV? Yes, VP9 is lossy, but at the sizes a character is displayed on a page the difference is invisible. Keep the MOV as your master.

Can a GIF have a soft shadow? No. Shadows need partial opacity, which GIF cannot store. A shadow in a GIF will be either solid or dithered into dots.

Why do some tools call it “alpha” and others “matte” or “key”? Same idea, different heritage. A matte is a separate greyscale image describing opacity; a key is a process that generates one from a colour; alpha is the channel that stores the result.

Which format should I archive? The ProRes 4444 MOV. Everything else can be regenerated from it; it cannot be regenerated from anything else.