education

List of Video/Image Formats Supporting Alpha Channels

A list of modern video formats that support alpha channels (aka “transparency layers”)
Jordan LambrechtJordan Lambrecht
|4 min read
Written by the one and only Jordan Lambrecht
List of Video/Image Formats Supporting Alpha Channels, by Jordan Lambrecht
🙃 Loading...

What an odd thing: I've been scouring the internet recently trying to find modern video formats that support alpha channels (aka "transparency layers"). Almost every forum I've reviewed references an article that has not been updated since 2008. Since it is now 2021 and over a decade later, I figured I would try to provide an updated version. This should be especially useful for Twitch streamers (stream overlays) and OBS/Streamlabs users.

What are alpha channels?

Alpha channels are essentially layers of transparency on an image or video. They're color components representing the degree of transparency (or opacity) of a color (i.e., the red, green and blue channels). They are used to determine how specific pixels are rendered when blended with other pixels. Generally, alpha channels are represented by a white and gray checkerboard or a solid black background.

What are alpha channels used for?

So. Many. Things. They're used for compositing images and footage, making memes and product cutouts, or in my case - displaying a video on the web on top of a colored background (this is an issue that deserves its own blog post).

Straight versus premultiplied

There are two ways of depicting an alpha channel. Straight (also called "unmatted," or "unassociated") and premultiplied ("matted," or "associated"). These only affect the color channels, and actually aren't related to the alpha channel itself.

Straight alpha channels can only be loaded in applications that support it, otherwise, it'll appear as a black screen. However, they retain more accurate color information than pre-multiplied alpha channels do. Straight channels retain more accurate color information than premultiplied channels. This is because it separates the RGB color values from the alpha values and stores them independently of each other - hence the term "unassociated". It doesn't matter what you place the image on, it'll look the same. You'll want to use straight alpha channels 98% of the time.

Premultiplied alpha channels work a bit differently. It mixes the alpha channels with the RGB color values ahead of time upon export. The upside to this is the image or video can be viewed agnostically on almost anything. However, it has a big negative side effect: since the image's alpha is already determined upon export, it'll take whatever the background WAS in the program you used to create it and mix it with the image, leaving a halo-like edge around your cut-out. This happens because the colors of semitransparent areas are shifted toward the background color in proportion to their degree of transparency, aka "matted" onto the image. Certain programs like After Effects have the ability to "unmult" layers, removing this effect for you.

If you're interested in the color science behind it all, I recommend checking out this article. It's a bit lengthy, but it provides extremely well-written in-depth information.

Okay, Now Onto The List

Please let me know if I'm missing any in the comments below. This is absolutely an incomplete list. I've removed several obscure and unsupported types from the original post.

File Format / CodecMaximum Alpha Bit-DepthBrowser SupportMedia TypePros & Cons / Notes
Apple Pro res 444416-bitnoneVideo / .movMassive, uncompressed videos. Generally used for storing masters.
HEVC / h.26510-bitLimited to Safarivideo / .HEVCMeant to be the successor to h.264
WebM (VP8 or VP9 video codecs)12-bitPretty DecentVideo / .WebMNote: Only Chrome will display alpha. Good info here
OpenEXR32-bitnoneImage / .exrhas largest HDR spread
PNG16-bitCompletely SupportedImage / .pngFun fact, you can animate PNGs.
TIFF32-bitNoneImage / .tiffLossy
Animated PNG24-bitPretty DecentImage / .apngWay better option than Gifs
GIF8-bitCommonly SupportedImage / .gifNote: Browsers generally do not support gif alpha layers. Generally are bulky with terrible compression.

Note: h.264 AKA MP4 does NOT support alpha channels.

Additional Note: I've decided to not include FLV on this list. It's an old, sunset format riddled with security issues and vulnerabilities.

Tags

adobe premier
after effects
alpha channels
Apple Pro res 4444
OBS/Streamlabs
transparency
Twitch
video codecs
video production
🙃 Loading...
🙃 Loading...