Animation format guide

GIF vs WebM vs Lottie: choose the format your product can actually ship.

The right animation format depends on where the asset will run, whether it needs transparency, and whether your product already includes a player. Here is the practical decision framework for mascots, UI motion, email, and video.

Use the format advisor Jump to the decision table

The short answer

Pick for the destination, not the file extension.

There is no universal winner. GIF, WebM, Lottie, dotLottie, and MP4 solve different delivery problems. Start with the environment, then validate the actual exported file.

Website hero or product UI

WebM

Best starting point for video-like mascot motion on a controlled web surface. Add a poster and test the browsers you support.

Email, documentation, or broad sharing

GIF

Use when an animated image is more important than video controls, soft transparency, or efficient delivery.

Interactive UI or state-based motion

Lottie / dotLottie

Use when your app already includes a compatible player and the animation benefits from scalable, code-driven playback.

Opaque video fallback

MP4

Useful for broad video playback, but it is not a transparent replacement for an alpha-enabled WebM asset.

Side-by-side

GIF vs WebM vs Lottie vs MP4

Question	GIF	WebM	Lottie / dotLottie	MP4
Best fit	Animated image, email, simple sharing	Video-like web motion, including tested alpha workflows	Scalable or state-driven UI motion with a player	Opaque video and broad video fallback
Transparency	Simple binary transparency	Can support alpha when encoded and played as tested	Depends on renderer and asset setup	Do not assume transparent output
Integration	Image element or animated-image surface	HTML video and player controls	Lottie or dotLottie runtime	HTML video and player controls
Main tradeoff	Limited palette and hard edges	Browser, autoplay, alpha, and fallback testing	Runtime and renderer compatibility	No ordinary alpha mascot workflow

Format notes

What changes the decision?

GIF is the compatibility-first option.

GIF supports simple animation and basic transparency, but it is limited to a 256-color palette. That makes it convenient for email and documentation, while soft mascot edges, gradients, and longer loops need more care. Use a real-file inspector to check dimensions, duration, and size before publishing.

WebM is a strong web format for motion and alpha.

Use WebM when the destination is a website or app you control and the asset behaves like video. A transparent WebM can preserve the page behind a moving mascot, but the encoder, browser, autoplay policy, and fallback all matter. For autoplay, use muted playback, playsinline, and a poster or still fallback.

Lottie and dotLottie are runtime-dependent.

Lottie is a good fit for vector-style interface motion when a supported player is already part of the product. dotLottie packages animation assets and can support a richer delivery workflow, but the package does not remove the need to test the chosen player. Do not choose it solely because the filename is JSON or because another renderer supports a feature yours does not.

MP4 is useful, but not for transparent mascots.

MP4 is a practical opaque-video fallback. If the character must sit over a changing page background, an ordinary MP4 should not be presented as equivalent to a transparent WebM. Use an opaque fallback only when the design can tolerate a fixed background or poster.

Transparent mascot example

Ship a video element with a graceful fallback.

For a web mascot, start with the tested transparent WebM and provide a poster or still image. An MP4 source can be added when an opaque fallback is acceptable; it does not preserve transparency.

<video
  autoplay
  muted
  loop
  playsinline
  preload="metadata"
  poster="/mascot-poster.webp"
  aria-label="Animated product mascot"
>
  <source src="/mascot-alpha.webm" type="video/webm" />
  <source src="/mascot.mp4" type="video/mp4" />
  <img src="/mascot-poster.webp" alt="Product mascot" />
</video>

Respect reduced motion, do not rely on autoplay for meaning, and test the source order on the browsers and devices you actually support. The mascot embed generator can create a starting snippet for your stack.

Mascofast workflow

Create once, then export for the destination.

Mascofast is designed for a consistent character workflow: create a mascot, branch into poses or variants, generate the first frame, render the animation, and export the format your product needs.

Create a reference mascot

Branch into poses and variants

Review before video rendering

Export WebM, GIF, PNG, or Lottie

The generation model is intentionally explicit: a mascot, pose, variant, or generated first frame costs 1 credit; video rendering costs 10 credits; failed generations do not charge credits. See the AI mascot generator for the creation flow or MCP developer guide for an editor-based workflow.

Before you ship

Five checks prevent most format mistakes.

1Test the actual browser, device, email client, or runtime.
2Load the page on a slow connection and confirm the poster or still fallback.
3Test muted autoplay, playsinline behavior, looping, and reduced-motion preferences.
4Inspect the exported file instead of trusting its extension.
5Measure the final user experience: visual quality, loading, interaction, and accessibility.

Compare formats with the advisor →Inspect an animation file →Remove a background →

FAQ

Common format questions

Is WebM better than GIF?+

For video-like web motion, WebM is usually the better starting point because it behaves like video and can carry alpha when the export and playback path support it. GIF remains useful when an animated image and broad compatibility are the priority. Test the actual target environment before choosing.

Can MP4 have a transparent background?+

Do not treat ordinary MP4 as a transparent mascot format. If the asset must reveal the page behind it, use an export and playback path that supports alpha, such as a tested transparent WebM workflow, and keep a still fallback.

When should I use Lottie?+

Use Lottie when the product already has a compatible Lottie or dotLottie player and the animation is a good fit for vector-style, scalable, or state-driven UI motion. A Lottie file still depends on the renderer and its supported features.

What is the best format for email?+

GIF is the safest first candidate for an animated email image, but keep it short, check the file size, and test the clients that matter to your audience. A static image is a useful fallback.

What does Mascofast export?+

Mascofast is built around transparent mascot assets. Its workflow can create a character, branch into poses and variants, render animation, and export assets including transparent WebM, GIF, PNG, and Lottie or dotLottie-compatible outputs.

Make the asset

Create a mascot you can export for every surface.

Start with a consistent character, then choose WebM, GIF, PNG, or Lottie based on where it will ship.

Create a mascot