Alpha Transparency in Chrome: How to convert videos to the WebM format (free)

Until recently, videos with transparency were not a thing on the web. Well, not entirely true: it's been a thing since Chrome version 31, released back in 2013.

But even though Chrome has more than 2 billion users by now, it's not enough. We still have half a billion on Safari, and more than 1 billion iOS users, who can only use Safari as their browser, even in other apps. In 2019, Apple launched support for HEVC With Alpha. We now have billions of browsers supporting alpha channel videos. But not in the same way; you need a WebM video for your Chrome videos and an HEVC video for your Safari users.

In this post, I'll show you various ways to do that. You may also find this interesting if all you want is to convert a video to WebM.

Here's what we'll go through today:

What is WebM?

WebM is Google's completely free video format, launched in 2010. It offers high quality, small file sizes, and is optimized for the smaller processors in mobile phones. From 2013, WebM also supported alpha transparency channels. Supported browsers are Chrome, Firefox, Opera, Edge, and, to a certain extent Safari on macOS Big Sur (2020) and newer. When I say "certain extent", it means yes, it's supported — but no transparency.

What is HEVC With Alpha?

HEVC is just another name for H.265. That means it's in direct lineage with H.262 MPEG-2, the DVD format. Like WebM, HEVC was made with high quality, low file size, and mobile devices in mind - and alpha transparency. Supported browsers are Safari on macOS and iOS, and the Android browser. Edge technically supports it but needs the right hardware, so I wouldn't rely on it fully.

How do you convert a movie to WebM?

There are several converter apps out there. Most of them are free and open-source, but not all of them are easy to use. Some of them are so complex that command-line tools seem more simple. Let's dive in and take a look at the most popular apps for video conversion.

Handbrake

Almost 20 years old, this app is famous among the DVD ripping generation of the 2000s. It has a very wide array of settings—to the point where it's just confusing. We haven't been able to get Handbrake to make a VP9 WebM with alpha channels yet.

Download Handbrake. Free.

Shutter Encoder

A less known free alternative and the simplest of the complex, Shutter Encoder's 1960ies car-inspired UI lets you convert between a wide range of formats. The advanced settings are packed away in a separate area, which is where you'll find the switch for preserving transparency, which is off by default. Alas, we have not been able to make this work yet.

Shutter Encoder. Free.

Rotato Converter

Honestly, we made this because we couldn't make the other tools work, or they were too complicated for a simple task like this. We may add more formats to the app, but right now it does one thing well: convert a video to WebM and HEVC With Alpha while preserving transparency. That's it.

Rotato Converter.

How do you convert a video to HEVC With Alpha?

If you have a ProRes4444 video with alpha, converting to HEVC is simple. You can use the Rotato Converter here, but you don't need an external app for this, as your Mac already knows how to do it.

1. Right-click the video file you want to convert
2. Choose Encode Selected Video File
3. Set the format to HEVC and check Preserve Transparency

Here's what it looks like

Using Rotato Converter

Here's a short video:

There's just one step:

1. Drag in your ProRes or HEVC video

Rotato Converter saves the converted videos in the same folder as the original. If your original video was named My Product Video.mp4, the converted videos will be called `My Product Video-vp9-chrome.webm` and `My Product Video-hevc-safari.mp4`.

How do you double-check that your video has alpha transparency?

QuickTime and QuickLook (in Monterey) don't show alpha channels, so you have to look elsewhere. Luckily, there are a few simple ways to do this. Read more in our Guide to Testing Video Transparency or take a look at the two options below using Rotato's free tools.

Testing in Rotato Converter

Simply by dragging your file to Rotato Converter, you'll see if the video has an alpha channel. If the background behind the video is a checkered pattern, that means "yes"!

Alas, this doesn't work for WebM, only HEVC With Alpha and ProRes4444 with alpha.

Testing on the web

If you watched the video above, you may have noticed that Rotato Converter shows two buttons when it's finished: Test in Chrome and Test in Safari. What these buttons simply do is take you to Rotato's Video Transparency Tester, and reveal the relevant file in a finder window on top.

Here's a video that shows exactly what that looks like:

Final thoughts

Video formats are not as easy as they could be, once you decide you want to move out of the safe space of embedding Vimeo and Youtube.

The good news is, if you do this, you'll most likely have an edge over other designers and developers who decide that it's just too much work. I hope I've shown you that converting and testing videos with alpha transparency isn't as complicated as it looks, especially not with the free tools above.