EasyLottie Guide
Transparent GIF vs WebM vs Lottie ZIP
Choosing a format for transparent animation on the web? Here is how transparent GIF, WebM, and Lottie ZIP really compare — and how to decide.
The decision in one table
If you have a short clip and want it transparent on a web page, you are really choosing between three practical outputs. They differ most in transparency quality, browser support, and file size.
| Criteria | Transparent GIF | Transparent WebM | Lottie ZIP (raster) |
|---|---|---|---|
| Transparency | 1-bit (hard edges) | Full alpha (smooth) | Full alpha (smooth) |
| Color depth | 256 colors | Full color | Full color |
| File size | Large | Small | Medium–large |
| Browser support | Universal | Chromium + Firefox (not Safari) | Any Lottie player |
| Needs a runtime? | No | No (native <video>) | Yes (lottie-web etc.) |
| Best for | Max compatibility, simple art | Modern, controlled browsers | Apps already using Lottie |
Transparency quality: the deciding factor
Transparent GIF only supports 1-bit alpha: a pixel is either fully visible or fully gone. On soft edges, shadows, glows, or anti-aliased text this produces ugly fringing, especially over colored backgrounds. If your clip has smooth edges, GIF will betray it.
Transparent WebM and raster Lottie ZIP both support full 8-bit alpha, so soft edges and semi-transparency look correct. For anything with feathered edges — AI green-screen subjects, glows, particles — these are the only acceptable choices.
File size and browser support
WebM is by far the most efficient of the three for full-color, full-alpha motion. The catch is Safari: Apple does not play alpha WebM, so on Safari the video shows up opaque or not at all. If your audience includes a lot of Safari/iOS users and you cannot detect-and-fallback, WebM alone is risky.
Lottie ZIP sidesteps the Safari video problem by rendering through a Lottie player instead of the native video element, but it costs you a JavaScript runtime and larger files than WebM. GIF avoids both problems with universal support, but pays in size and 1-bit transparency.
How to choose
Match the format to the player you already have and the browsers you must support.
- Already using a Lottie player? Export Lottie ZIP for consistency.
- Control the browsers (no Safari, or with fallback)? Use transparent WebM — smallest and smooth.
- Must work literally everywhere and art is simple/flat? Use transparent GIF.
- Want a safety net? Ship WebM with a GIF or Lottie fallback.
Quick checklist
- Need smooth edges? Rule out GIF (1-bit alpha).
- Supporting Safari without fallback? Rule out alpha WebM.
- Already loading a Lottie runtime? Lottie ZIP fits naturally.
- Export all three locally and compare on your real clip.
Frequently asked questions
Does transparent WebM work in Safari?
No. Safari does not play alpha WebM. Use a Lottie ZIP (via a Lottie player) or a transparent GIF for Safari, or provide a fallback.
Why does my transparent GIF look jagged?
GIF supports only 1-bit transparency, so soft and anti-aliased edges become hard cutouts. Use WebM or Lottie ZIP for full alpha.
Which is smallest?
Transparent WebM is usually the smallest for full-color, full-alpha motion. GIF is typically the largest.
Can I export all three?
Yes. EasyLottie’s Video to Lottie tool can export Lottie ZIP, transparent WebM, transparent GIF, and PNG sequence, all in your browser.