DEV Community

DemoVexa
DemoVexa

Posted on

Transparent Background Video Export: Alpha Channels, ProRes 4444 vs WebM VP9

A transparent background video stores a fourth channel, alpha, next to the color data, so an editor or browser knows which pixels to show. In practice you choose between two files: ProRes 4444 in a MOV for editing, and VP9 in a WebM for the web. This post covers how alpha is stored, the ffmpeg commands I use to make and verify each file, and the mistakes that make transparency quietly disappear.

Key takeaways

  • Alpha only survives if the pixel format carries it. Look for yuva, not yuv.
  • ProRes 4444 is the editing format: high quality, very large files.
  • VP9 in WebM is the web format: small files, alpha in Chromium browsers, none in Safari.
  • ffmpeg's built-in VP9 decoder ignores alpha, so force libvpx-vp9 when reading a transparent WebM.

Contents

What is an alpha channel in a video file?

An alpha channel is a per-pixel opacity value stored alongside the color. Zero is fully transparent, the maximum is fully opaque, and values in between give you soft edges and shadows.

Most delivery video has no alpha at all. H.264 in an MP4 is normally encoded as yuv420p: brightness plus two color channels and nothing else. So "export with transparency" is a question about codec and pixel format, not a checkbox.

Alpha can be straight or premultiplied. If an editor reads it the wrong way, you get a dark or light fringe around anti-aliased edges, so check the clip's alpha interpretation setting before blaming the encoder.

Should you export ProRes 4444 or WebM VP9?

Export ProRes 4444 when the file goes into an editor, and VP9 WebM when it goes onto a web page.

ProRes 4444 (.mov) VP9 with alpha (.webm)
Compression Intraframe, near lossless Interframe, lossy
ffmpeg pixel format yuva444p10le yuva420p
Color resolution Full (4:4:4) Subsampled (4:2:0)
File size Very large Small
Best home Premiere, Final Cut, DaVinci Resolve Web pages in Chrome and Edge
Weak spot Disk space and upload time No alpha in Safari or Final Cut

For scale, Apple's ProRes white paper puts ProRes 4444 at 1080p and 29.97 fps at a target of about 330 Mbps, before alpha.

The color resolution row matters for UI video. With 4:2:0, small colored labels get slightly soft, while white and gray text holds up well.

How do you encode each format with ffmpeg?

Start from a transparent PNG sequence and encode it twice.

# ProRes 4444 with alpha
ffmpeg -framerate 30 -i frames/%05d.png \
  -c:v prores_ks -profile:v 4444 -pix_fmt yuva444p10le demo.mov

# VP9 with alpha, constant quality mode
ffmpeg -framerate 30 -i frames/%05d.png \
  -c:v libvpx-vp9 -pix_fmt yuva420p -crf 30 -b:v 0 demo.webm
Enter fullscreen mode Exit fullscreen mode

Two details matter:

  1. The -pix_fmt flag is what keeps alpha. Leave it out and ffmpeg may pick a format without it.
  2. With libvpx-vp9, -b:v 0 next to -crf gives constant quality. Without it, a default bitrate acts as a ceiling.

How do you check that the alpha survived?

Run ffprobe, and know that the two files report alpha differently.

ffprobe -v error -select_streams v:0 \
  -show_entries stream=codec_name,pix_fmt:stream_tags=alpha_mode \
  -of default=nw=1 demo.webm
Enter fullscreen mode Exit fullscreen mode

For the MOV, you want a pixel format starting with yuva. For the WebM, ffprobe usually reports yuv420p even when alpha is present, because WebM stores alpha as extra data beside each frame. The real signal is TAG:alpha_mode=1.

Then pull a frame and view it on a checkerboard:

ffmpeg -c:v libvpx-vp9 -i demo.webm -frames:v 1 check.png
Enter fullscreen mode Exit fullscreen mode

The -c:v libvpx-vp9 before -i matters. Without it, ffmpeg's native VP9 decoder drops alpha and your PNG comes out on solid black.

What goes wrong most often?

These are the failures I see most:

  • Expecting transparency from an H.264 MP4. If the target only takes MP4, export green screen and key it.
  • A converter or upload pipeline that transcodes to yuv420p and silently drops alpha.
  • Previewing a WebM in Safari or Final Cut and deciding the file is broken.
  • Trusting <source> order on the web. Safari needs a separate file, such as HEVC with alpha, so pick the file with a small script and test in each browser.

In the app I build, the Export step offers a transparent MOV in ProRes 4444, a transparent WebM in VP9 and a green screen MP4. The walkthrough on exporting a product demo on green screen or with a transparent background covers the in-app steps, and the full list of code-to-video export options and formats is on the features page.

FAQ

Does MP4 support a transparent background?

Not with H.264, which most MP4 files contain. Use ProRes 4444 for editing, VP9 WebM for Chromium browsers, or HEVC with alpha for Apple devices.

Why does my transparent WebM show a black background?

Usually the decoder dropped alpha. In ffmpeg, put -c:v libvpx-vp9 before -i. Safari doesn't support WebM alpha, so serve it a different file.

Is ProRes 4444 lossless?

No. Its alpha channel is stored losslessly, but the color data is compressed. It is visually near lossless, so for editing the difference is rarely visible.

Which format should I send to a video editor?

Ask what they edit in. ProRes 4444 suits Premiere, Final Cut and Resolve. If you don't know their setup, a green screen MP4 works almost everywhere.

Baltej Singh is the founder of DemoVexa, a desktop app and CLI that turns a local codebase into narrated product demo videos. He writes from Delaware, USA.

Top comments (0)