Alpha Transparency in Chrome: How to convert to the WebM format
Until recently, videos with transparency was not a thing on the web. Well, not entirely true: it's been a thing since Chrome version 31, released all the way 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 have billions of browsers supporting alpha channel videos. But not in the same way; you need a WebM video for your Chrome videos, and a 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 really 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 a number of converter apps out there. Most of them are free and open source, but not all of them are easy to use. In fact, 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.
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.
Adobe Media Converter
Slightly easier to use, but still complex, this tool is also a classic, mostly used by users of Adobe Creative Cloud. Be warned though, it's not free, and you get a bonus always-running Adobe Updater running next to the top right clock. Additionally, it might not install on your Apple Silicon Mac (we tried and failed in November, 2021)
Adobe Media Encoder. Not free.
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.
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.
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 really don't need an external app for this, as your Mac already knows how to do it.
- Right click the video file you want to convert
- Choose Encode Selected Video File
- Set the format to
Heres' what it looks like
Using Rotato Converter
Here's a short video:
There's really just one step:
- 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's 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 to take you to Rotato's Video Transparency Tester, and revealing the relevant file in a finder window on top.
Here's a video that shows exactly what that looks like:
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.