How to convert MP4 and other video formats to WebM for free

Until recently, transparent videos were not available on the web. Well, that's not entirely true: they have been available since Chrome version 31, released in 2013.

But even though Chrome has more than 3 billion users 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. Today, billions of browsers support 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. If you only want to convert a video to WebM, you may also find this interesting.

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 and small file sizes and is optimized for mobile phones' smaller processors. 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 with no transparency.

What is HEVC With Alpha?

HEVC is just another name for H.265, which 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, mobile devices in mind, and alpha transparency in mind. 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 to convert MP4 and other video files to WebM?

We created a tool for anyone to convert videos to WebM since most tools we found simply did not work or 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.

Instructions:

1. Get the Rotato Converter.
2. Open Rotato, drag and drop your MP4 or other video formats into the tool.
3. The conversion should start right away. Wait for it to finish.
4. Et voila, your WebM file should be saved in the same location as the original video.

If you're exploring, there are several converter apps out there. Most are free and open-source, but not all are easy to use. Some are so complex that command-line tools seem simpler. Here are two popular ones:

Handbrake

Almost twenty years old, this app is famous among the DVD-ripping generation of the 2000s. It has a wide array of settings, which can be confusing. Unfortunately, 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 1960s car-inspired UI lets you convert between a wide range of video formats. The advanced settings are in a separate area, where you'll find the switch for preserving transparency, which is off by default. Alas, we have not been able to make this work either.

Shutter Encoder. Free.

How to 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—as your Mac already knows how to do it. To do so:

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.
2. The conversion should take place right away.
3. Done, check your converted video.

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 to double-check that the converted 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 use Rotato's free tools to examine the two options below.

How to test for alpha transparency in the 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!

Note: This method doesn't work for WebM, only HEVC with alpha and ProRes4444 with alpha.

Testing on the web

If you watch the video above, you may notice that the Rotato Converter shows two buttons when it's finished: Test in Chrome and Test in Safari. These buttons simply take you to Rotato's Video Transparency Tester and reveal the relevant file in a finder window at the 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 that if you do this, you'll most likely have an edge over other designers and developers who decide 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.

While you're here, don't forget to check out the dozens of templates Rotato offers to help you with your animated mockup needs.