Here’s your cheat sheet on video file formats:
Criteria | GIF | AVC MOV | WebM (VP9) | MP4 (HEVC) | Lottie JSON |
---|---|---|---|---|---|
Type | Raster | Raster (ProRes) | Video (VP9 codec) | Video (HEVC/H.265) | Vector animation (JSON) |
File size | ❌ High | ❌ Very High | ✅ Low | ✅ Low | ✅ Very Low |
Transparency | ⚠️ Binary only | ✅ Full alpha (8-bit) | ✅ Full alpha (8-bit) | ✅ Full alpha (8-bit) | ✅ Full (vector-based) |
Web compatibility | ✅ Good | ❌ Poor | ✅ Excellent | ✅ Excellent | ✅ Excellent |
Web Support | ✅ All browsers | ❌ Poor | ✅ Chrome, Firefox, Edge | ✅ Safari (macOS/iOS) | ✅ All modern browsers |
Editing Use | ❌ Not suitable | ✅ Yes | ❌ Not ideal | ❌ Not ideal | ❌ Not used in editors |
Best use case | Memes, avatars | Post-production, editing | Web videos, apps | Web videos, apps | UI animations, mobile apps |
If your animation requires transparency and will be embedded into a web page, your best option is to combine two formats for full browser coverage:
Together, these two formats ensure seamless playback and alpha channel support across all major platforms.
<video width="100%" height="100%" autoplay loop muted playsinline>
<source src="your-video.webm" type="video/webm">
<source src="your-video.mp4" type='video/mp4; codecs="hvc1"'>
</video>
⚠️ Note: Alpha transparency in HEVC is only supported on Safari and some hardware-accelerated systems.
For web use, WebM + HEVC MP4 is the most effective combination for delivering high-quality animations with transparency:
Stop subjecting your users to janky animations—pick the right format, and they might actually stick around long enough to see your call-to-action button.
About the author
Eugene Weiss, team lead of Animation at Icons8.
From bold typography to organic abstracts, explore creative poster layouts with pro tips to adapt…
Everyone's out here saying "don't use Garamond" like it's 2015. Spoiler alert: it's not.
Stop falling for basic color wheel BS. Here's how color psychology actually works in branding.
For most businesses, the website is where the first interaction happens with prospects and customers.…
Soft, stylish, and anything but boring—see how pastel colors can elevate your brand, UI, or…
Boring boxes are out—these packaging designs solve real problems, turn heads, and prove good design…
This website uses cookies.