Choosing the right video file format for your project

Here’s your cheat sheet on video file formats:

HEVC MP4 + WebM: transparency on the web

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:

• Use WebM (VP9) for all Chromium-based browsers and Firefox (Windows, Android, Linux).

• Use MP4 with HEVC (H.265 + alpha) for Safari on macOS, iPhone, and iPad, since WebM is not supported there.

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.

Format descriptions (technical)

GIF

• Raster format, supports simple frame-based animations.
• Limited to 256 indexed colors.
• Supports only binary transparency (fully transparent or opaque).
• Uses LZW lossless compression but produces large files.
• Broad browser support, not ideal for modern interfaces or quality-sensitive use.

AVC MOV (ProRes 4444)

• Used in professional pipelines; full alpha channel (8-bit).
• Very high quality, intra-frame encoding.
• Suitable for post-production and editing, not for web.
• Heavy file size, poor browser playback.

WebM (VP9)

• Open-source container with VP9 codec.
• Supports full alpha (8-bit), high compression efficiency.
• Best for web delivery, but not supported in Safari/macOS/iOS.
• Ideal for modern browsers on desktop and Android.

MP4 (HEVC H.265 with alpha)

• High-efficiency codec with full alpha support.
• Only works on Safari and some newer Apple hardware.
• High compression, suitable for embedding, but not widely editable.
• Requires fallback for other browsers – WebM.

Lottie JSON

• Vector-based animation exported via Bodymovin from After Effects.
• Supports scalable vector graphics with full alpha.
• Extremely lightweight, not suitable for video production or raster elements.
• Great for web/app UI animations, not for traditional video tools.

Conclusion

For web use, WebM + HEVC MP4 is the most effective combination for delivering high-quality animations with transparency:

• WebM (VP9) handles most browsers efficiently.
• HEVC MP4 ensures Safari compatibility.
• For interface animations, use Lottie JSON whenever possible—it’s small, scalable, and easy to control with code.
• Use MOV (ProRes) only in production workflows where editing quality is critical.

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.