Lottie vs Transparent Video for Websites: Choose by the Source and the Behavior

Choose a Lottie workflow when you have suitable editable animation content and need to deliver it through a supported animation player. Choose transparent video when the wanted result is already rendered or recorded imagery, such as a moving cutout, and a video delivery workflow fits the page. Neither is automatically smaller, faster or universally compatible. A Lottie package can include image assets; putting video frames inside an animation package does not turn them into editable vector shapes. Inspect your actual source, define the visitor behavior, and test the complete published asset with its player, dependencies and nonmoving fallback before committing to either route.

Decide before you flatten the animation

A designer can ask for a transparent animation while meaning several different things: a scalable line drawing, a hand-painted character, a recorded presenter or a complex product demonstration. They may all sit beside a website headline, but their source material and future changes are not interchangeable.

The useful decision often happens before export. If you flatten a collection of editable shapes into video, a receiving developer cannot assume that each shape remains individually available. Conversely, wrapping a rendered image sequence in animation data does not reconstruct the original drawing controls. Changing the container is not the same as recovering the source project.

This guide is written by the AlphaPublish Editorial Team using primary documentation checked on October 15, 2026. AlphaPublish is a commercial transparent-video delivery option, so this is an owned-site, document-based decision guide, not an independent vendor ranking. We have not benchmarked matching animations, measured runtime performance or certified device and browser combinations for this article.

Inspect what you actually own

Ask for the source project as well as the export. Find out whether the visible motion comes from editable shapes and transformations, raster images, filmed footage or a combination. Also identify any external images, fonts and scripts that the receiving website will need. A small top-level file can depend on other resources.

The primary lottie-web project documentation describes animation data loaded into a player and notes associated image assets. Its loadAnimation options include renderer and asset-location choices. This is why the word Lottie alone is not a promise of pure vectors, a single self-contained file or identical behavior across players.

For a video source, inspect the actual transparent export rather than a marketing thumbnail. A rectangular preview can conceal a baked-in background, while a working screenshot does not prove every frame or every device is correct. Our transparent WebM guide owns that output-specific discussion. This comparison is about choosing the source and runtime contract before you hand over a file.

A comparison based on the deliverable

This is not a claim that a Lottie file cannot contain raster imagery or that a video cannot be coordinated with page interaction. Both statements would be too broad. The practical question is what your particular source, player and implementation expose, and who will maintain them.

Keep a Lottie route when editable motion is the valuable part

A shape-based logo or a simple authored illustration may have a reason to remain in an animation workflow. Perhaps the design team expects to revise a color, adjust a timing segment or maintain several related variants from one source. Investigate whether the chosen export and player preserve what the team actually needs to change.

Do not turn that possibility into a blanket promise of automatic theme changes or arbitrary interaction. Write down the exact behavior, such as playing a particular segment after a visitor action, and verify it in the intended implementation. A format label does not by itself establish that a site builder exposes the necessary controls.

Request a small representative export before approving the whole design. Include the least ordinary part of the animation, not only a simple introductory shape. If the receiving renderer does not reproduce it acceptably, revise the source or reconsider delivery before the project accumulates more unsupported assumptions. A feature table from another player or an older version is not a test of your selected setup.

Keep a video route when the moving pixels are the product

A filmed presenter, textured character or already-rendered visual sequence may be better approached as media rather than rebuilt as an editable drawing. Start from the material you have. If changing individual shapes is not a requirement, recreating the scene solely to obtain a different file extension can introduce work without delivering a useful visitor outcome.

The native HTML video element has its own documented playback and loading behavior. The MDN video reference explains options such as controls, poster imagery and playback attributes. Those options do not guarantee alpha rendering, autoplay permission or equivalent behavior in a custom hosted player; each delivery still needs its own verification.

AlphaPublish may fit when your task is short transparent-video website delivery. Review the current workflow, qualifying output and hosting approach before committing. This does not make AlphaPublish a Lottie authoring tool, a Lottie converter, an arbitrary file converter or a complete replacement for an animation editor. Keep an existing Lottie workflow when that is the more appropriate source and maintenance model.

A conversion does not recover lost editability

When someone proposes converting a video into Lottie, ask what the output contains. Is it newly authored shape animation, an image sequence, a collection of raster layers or something else? Which original properties remain editable? What additional assets are required, and which exact player accepts the result?

Do not reject every image-based animation package as invalid. It can serve a real delivery requirement. But evaluate that requirement honestly rather than assuming the package inherits every perceived advantage of lightweight vector artwork. A changing filename cannot establish a smaller transfer, more reliable playback or editable control over a person's hair and clothing.

The reverse conversion has a different cost. Rendering an animation as video can preserve its visible motion while losing the expectation that individual objects remain exposed to the website as separate authored elements. Keep the original project so later design changes do not begin from a flattened export. State clearly whether the deliverable is a visual result or an editable animation system.

Write a source, runtime and behavior handoff contract

1. Describe the visitor outcome

Write one sentence explaining what the animation contributes. For example, it illustrates a product concept next to text, or it lets a visitor start a short presenter introduction. Do not describe a decorative loop as essential navigation. If the motion conveys information, ensure the page remains understandable when that motion is unavailable.

2. Name the source owner and revision path

Record who owns the editable project, where it is stored and how a requested change becomes a new deliverable. Include source assets and required permissions. A developer who receives only the final URL should not be expected to recreate an animation from scratch when the marketing team asks for a different gesture.

3. Name the intended player and dependencies

For an animation package, record the player, renderer and required assets. For video, record whether the receiving site uses native media or a hosted embed and who controls that delivery. Check the published page rather than relying solely on a builder preview. A working local file does not establish that a production asset path or embedding policy is correct.

4. Make the nonmoving state intentional

Agree what appears before loading, when playback is unavailable and when a visitor does not want motion. The W3C explanation of Pause, Stop, Hide gives important conditions for automatically moving content presented alongside other content. Plan the relevant control or alternative, not merely a forever-looping export.

This is a planning checklist, not a blanket accessibility certification. A pause button, reduced-motion behavior and the informational role of an animation need to fit the actual page. Neither a Lottie player nor a video file makes the entire implementation accessible by default.

5. Define acceptance and replacement

List the supported browser and device combinations, intended display size, page backgrounds and visitor actions. Review the start, a detailed middle frame, the loop boundary and the nonmoving state. Record the exact asset and player versions that were checked. Assign responsibility for retesting after an asset, runtime or embedding change.

Compare the complete page, not a file-size slogan

If both approaches can meet the same job, prepare representative candidates with the same visible content, duration and display size. Count the delivered resources required for each, including images, player code and fallback media where applicable. A compressed animation package and an editor project file are not equivalent measurements.

Observe loading and interaction on the actual supported setups. Also inspect visual fidelity: edges, textures, small details and changes over the loop. Do not declare a winner after making one candidate simpler or shorter without documenting the difference. Another site's benchmark is not a prediction for your source.

No universal smaller, faster or smoother claim is established here. The outcome may favor the existing source workflow, a simpler animation or no continuous motion at all. If the page's job can be served by a static illustration, do not add a runtime merely because motion is available.

For the narrower choice between two already-rasterized deliveries, see animated WebP versus transparent WebM. That is a different decision from preserving authored animation data versus flattening to rendered media.

Frequently asked questions

Is every Lottie animation entirely vector-based?

No. The lottie-web documentation includes image assets. Inspect the actual export and its dependencies rather than assuming that a JSON extension proves pure vectors or resolution-independent detail in every visible element.

Will converting a video to Lottie make it smaller?

Not automatically. Establish what the conversion produces and measure all resources needed by the receiving player. An image sequence inside an animation package does not become a newly authored set of editable vector shapes simply because the wrapper changes.

Can transparent video be used for website animation?

It can be a candidate when the source and playback requirements fit an appropriate delivery workflow. Validate the exported alpha, intended player and supported setups. Our compatibility page is the product-specific starting point, not a promise of universal device support.

Which should I use for a filmed person beside a headline?

Start by evaluating a transparent-video route because your source is recorded imagery. Define whether motion is decorative or informative, plan its nonmoving state and inspect the actual cutout. Do not assume that a conversion to animation data supplies editable control over the person.

Does AlphaPublish import or export Lottie files?

This article makes no such capability claim. AlphaPublish is discussed only for its current transparent-video website workflow. If your job requires authored Lottie data or particular runtime interactions, keep the appropriate authoring and player tools rather than expecting a video publisher to supply them.