<p>Transparent video on the web is possible, but it's going to only work for users with modern browsers.  You'll need to export in two different codecs - one for Chrome users, one for Safari.</p>
<p>From <a href="https://www.rotato.app/read/transparent-videos-for-the-web" rel="nofollow noreferrer">this site</a>:</p>
<blockquote>
<p>Safari supports HEVC with alpha, Chrome does not.
Chrome supports VP9 with alpha, Safari does not.</p>
</blockquote>
<p>You need to export an HEVC with alpha channel for Safari.</p>
<p>You need a .webm VP9 codec with alpha for Chrome.</p>
<p>The animation codec you've exported at is not designed for web publishing.  It's a lossless very large codec designed for editing or archiving your finished project before you use it to make a smaller lossy version to go on the web.</p>
<p>This is how to make the webm using ffmpeg</p>
<pre><code>ffmpeg -i &quot;movie-prores.mov&quot; -c:v libvpx-vp9 movie-webm.webm
</code></pre>
<p>I would recommend also exporting a &quot;fallback version&quot; for browsers that can't cope with transparent video (as a normal h264 mp4 or webm).</p>

CC BY-SA 4.0
2021-05-28T17:46:33.767Z
Thank you so much for your help! I will try this!
Shredde
CC BY-SA 4.0
2021-05-28T18:26:48.353Z
You’re welcome- please mark it as an answer if it helps!
tomh
CC BY-SA 4.0
2021-05-28T08:43:14.520Z
2021-05-28T08:43:14.520Z
tomh
<p>Probably a good option, depending on the animation, is a CSS or JavaScript animation of a PNG sequence. This works well for 360° animations.</p>
<p><a href="https://www.google.com/search?client=firefox-b-d&amp;q=360+javascript+animation" rel="nofollow noreferrer">https://www.google.com/search?client=firefox-b-d&amp;q=360+javascript+animation</a></p>

CC BY-SA 4.0
2021-06-16T09:19:54.050Z
Yes - this is a solution a lot of newspapers use for their "scrollytelling" animations.  Works better for shorter diagramatic animations than photographic work due to file sizes.
tomh
CC BY-SA 4.0
2021-05-30T21:52:47.227Z
2021-05-30T21:52:47.227Z
Rafael
<p>A client asked me to do an animated product visualization in 3D and then render out the animation in 4K with a transparent background to put on their website. The animation is done but if I want to export it without background I realized that Quicktime is the only option. The 4-sec video then becomes 1,8GB in size! Is there any way around this or do I have to tell them that we can't go with 4K? or can I compress it or use some other format? The animation is also choppy in the video exported without background. When I render out an MP4 with the background it runs smoothly.</p>

<file-formats><export>
Video with transparent background file-size issue
Shredde
# Video with transparent background file-size issue

(Asked by: username_0 on 2021-05-26)

A client asked me to do an animated product visualization in 3D and then render out the animation in 4K with a transparent background to put on their website. The animation is done but if I want to export it without background I realized that Quicktime is the only option. The 4-sec video then becomes 1,8GB in size! Is there any way around this or do I have to tell them that we can't go with 4K? or can I compress it or use some other format? The animation is also choppy in the video exported without background. When I render out an MP4 with the background it runs smoothly.

**Tags:** file-formats, export


---

## 2 answers

### Answer by username_1 on 2021-05-28. Score: 0 | Accepted answer

Transparent video on the web is possible, but it's going to only work for users with modern browsers.  You'll need to export in two different codecs - one for Chrome users, one for Safari.
From this site:

Safari supports HEVC with alpha, Chrome does not.
Chrome supports VP9 with alpha, Safari does not.

You need to export an HEVC with alpha channel for Safari.
You need a .webm VP9 codec with alpha for Chrome.
The animation codec you've exported at is not designed for web publishing.  It's a lossless very large codec designed for editing or archiving your finished project before you use it to make a smaller lossy version to go on the web.
This is how to make the webm using ffmpeg
ffmpeg -i "movie-prores.mov" -c:v libvpx-vp9 movie-webm.webm

I would recommend also exporting a "fallback version" for browsers that can't cope with transparent video (as a normal h264 mp4 or webm).

> **Comments:**
> **username_0**: Thank you so much for your help! I will try this!  
> **username_1**: You’re welcome- please mark it as an answer if it helps!  

---

### Answer by username_2 on 2021-05-30. Score: 1

Probably a good option, depending on the animation, is a CSS or JavaScript animation of a PNG sequence. This works well for 360° animations.

<https://www.google.com/search?client=firefox-b-d&q=360+javascript+animation>

> **Comments:**
> **username_1**: Yes - this is a solution a lot of newspapers use for their "scrollytelling" animations.  Works better for shorter diagramatic animations than photographic work due to file sizes.  

---

