How to Export a Video with a Transparent Background for Different Browsers

5 min readNov 9, 2024

When I found out about this a few days ago I completely lost my mind. I don’t know how I did not research this topic more thoroughly, because I was completely convinced that there is no way of having a video with transparency.

Before this, we were using GIFs and PNG sequences, which were controlled by JavaScript with an on-scroll trigger. This method was outrageous because the GIFs were enormous in file size.

For one website I had to manually optimize more than 150 PNGs using TinyPNG with a VPN, because who pays for TinyPNG anyway? And last but not least, the fact that I'm using a physical-based render engine that produces life-like results, and then compressing those renders into a bunch of pixels for the web.. it was unhuman.

Hey all, my name is Yordan Stoyanov (www.stoyanov.works) and I am a 3D and Web Designer from Sofia, Bulgaria. I integrate 3D assets in every website I possibly can. Having a streamlined approach between me and my dev when it comes to 3D assets is crucial. So buckle up, sharing time.

Softwares we will be using:
1. Adobe After Effects — for loading our transparent PNGs;
2. Adobe Media Encoder — for exporting the transparent video;
3. Shutter Encoder (free) — converting the video to webm;
4. Mac OS Finder, yep. Apple being Apple. We need a Mac OS Device for this one — converting the video to a Safari-friendly format.

Shoutout to ChainGPT’s website for inspiring us to research this topic more deeply. Their website is completely bonanza: https://labs.chaingpt.org/

An example of 3D in a recent Web Project — 200pct.com

Step 1: PNG Sequence, After Effects & Media Encoder

Load PNG Sequence:

Import your PNG sequence into Adobe After Effects.
Trim the composition to remove any unneeded space.
Be sure to adjust the FPS of the composition to match the FPS of your sequence. For example, Cinema 4D initially comes with 25 FPS, and After Effects with 24 FPS. This will cause a frame to be skipped and you’ll have some issues.

2. Export to Adobe Media Encoder:

Go to File > Export > Add to Media Encoder Queue.
Quit After Effects and never open it again. Finally.

3. Adjust Export Settings in Media Encoder:
For the best experience, just click on the blue text under the “Format” column. In the screenshot below it says “QuicktTme”. A pop-up will appear with a looooot of settings. But don’t worry, we’ll be out of here in no time.

Format: Select QuickTime.
Preset: Choose Apple ProRes 4444 with Alpha for transparency.
There are like 30 different Apple ProRes presets and finding “4444 with Alpha” is a struggle. Be sure to check them through, it’s there.
Disable “Export Audio” if you do not have any audio.
Enable “Render at Maximum Quality” and “Render at Maximum Depth” for the best output.
Big disclaimer here. If you are really trying to save file size, think 5 times before checking these two checkboxes, because they can make your file a bit chunky. When I export for the web, I rarely check them, because my assets are sharp enough with and without them.

Recap: QuickTime, Apple ProRess 4444 with alpha

4. Export:

This will produce a .mov file in ProRes format, with transparency but a large file size.
Now you have a .mov file with a transparent background, perfect for editing. But oh oh, it’s huge, damn it. So, let’s make it more web-friendly by converting it into optimized formats. It would be too boring if the process was this easy. We have 1234 different browsers to support, in case you didn’t know.

Step 2: Converting MOV to WEBM for Chrome, Opera, and Firefox

Open Shutter Encoder:

Download and install Shutter Encoder.
Drag and drop your .mov file into the interface.

2. Select Conversion Settings:

Choose VP9 for .webm format from the dropdown.
Enable Alpha Channel under Advanced Features.

3. Start Conversion:

Click “Start Function” to output a .webm file with transparency.
MAGIC. File size should be reduced A LOT. In my case, it goes from 100MB to 2MB.

When you open Shutter Encoder it’s just a small window. Load your footage to see all the specs.

Step 3: Converting MOV to HEVC for Safari

Right-click on the MOV File (on a Mac):

Select “Encode Selected Video Files.”

2. Choose HEVC 1080p Settings:

Select “HEVC 1080p” and ensure “Preserve Transparency” is checked.

3. Export the File:

Click “Continue.” You’ll have an .hevc file for Safari compatibility.

There has to be another way of doing this. But in my case my dev is on a mac and i’m on a PC, so this job is on him, lol.

Key Takeaways

Format Compatibility: Use .webm for Chrome, Firefox, and Opera, and .hevc for Safari.
File Size: These optimized formats reduce file size dramatically, from around 100 MB to roughly 2MB, without sacrificing transparency.
Transparency Settings: Ensure settings for alpha channels are always enabled to retain transparency in the final output.

Common Pitfalls and Troubleshooting

Transparency Loss: Ensure you select the correct codec (Apple ProRes 4444 for MOV, VP9 with Alpha for WEBM, HEVC with transparency for Safari) to avoid losing transparency.
Large File Sizes: If the final files are too large, check your resolution and bit rate settings. Lowering these can help manage size without heavily impacting quality.
QuickTime Confusion: Using the wrong QuickTime setting can lead to non-transparent exports, so always double-check for “Apple ProRes 4444.”

Alternatives and Additional Resources

If Adobe software is not available, here are a few alternatives:

DaVinci Resolve: For basic video editing and some export options, DaVinci Resolve is a robust, free alternative.
FFMPEG: FFMPEG is a command-line tool for video format conversion, including support for transparency with .webm and .hevc.

Closing Thoughts

Hope this makes sense. Please reach out if something is not working or it’s missing, i’ll fix it or add more information. I’m just really excited that this thing exists. Happy 3D in Web designing.

You can follow me on Instagram, Behance, or visit my website — stoyanov.works