Lottie to GIF conversion guide: settings, quality, and workflows
From JSON keyframes to pixels: what actually happens
A Lottie file is a set of vector instructions — shapes, transforms, and keyframes — played back by a runtime like lottie-web. A GIF is the opposite: a fixed grid of pixels for every frame. Converting between them means rendering the animation frame by frame at a chosen resolution and frame rate, then encoding those frames with GIF's 256-color palette compression. This tool does that entire pipeline in your browser using the official lottie-web renderer, so what you see in the preview is exactly what lands in the GIF. If you need the reverse direction — turning a GIF into a Lottie you can use in an app — use our GIF to Lottie converter.
Choosing frame rate and size for your use case
GIF file size grows linearly with frame count and roughly with pixel area, so the two settings that matter most are fps and max width. For Slack, Discord, and email, 15 fps at 320–480px wide is the sweet spot — smooth enough for UI motion and small enough to load instantly. For portfolio pieces on Dribbble or LinkedIn where quality matters, use 25–30 fps at 640–800px. Keep loops short: a 3-second loop at 15 fps is 45 frames; a 30-second animation at 30 fps is 900 frames and will produce a very heavy file. If your final GIF is still too large, run it through our Image Compressor or reduce the width further.
Handling transparency and backgrounds
Lottie animations are usually authored on a transparent canvas, but GIF only supports binary transparency — each pixel is either fully opaque or fully invisible, with no alpha gradient. That means soft drop shadows, glows, and anti-aliased curves can pick up fringes against the page behind them. For the cleanest result, pick a solid background color that matches the destination (white for docs and email, dark for Slack dark mode, or a custom brand color). Reserve the Transparent option for flat, hard-edged animations like icons and shape loops. If you need to strip a background from an existing animated GIF instead, our GIF background remover handles that.
Where GIF output fits in a motion design workflow
Most teams use Lottie as the production format — it ships inside the app — and GIF as the communication format. Designers export a Lottie from After Effects with Bodymovin or download one from LottieFiles, then need a GIF to share progress in a channel, attach to a Jira ticket, or include in release notes. This converter covers that step without installing anything. Going the other way, you can build Lottie files from source media with our MP4 to Lottie and GIF to Lottie tools, or create GIFs from raw video with Video to GIF and from image sequences with the Animated GIF Maker.
JSON vs .lottie files: both are supported
A plain .json export contains the full animation, with any raster images either embedded as base64 or referenced as external files. A .lottie file (dotLottie) is a compressed archive holding the JSON plus its image assets. This tool accepts both: for dotLottie files it unpacks the archive and inlines the images automatically. The one case that needs a re-export is a JSON that references external image files that were never embedded — the browser has no way to fetch those, so export with "include assets" enabled in your tool of choice.
JSON to GIF: same conversion, different search term
If you searched "JSON to GIF" rather than "Lottie to GIF," you're in the right place — a Lottie file is a JSON document following a specific animation schema, so the two phrases describe the same conversion. This also covers files downloaded straight from LottieFiles: paste in the .json or .lottie you downloaded from their library or marketplace, no LottieFiles account or API key needed on this end.
This converter vs. screen-recording the animation
Before a tool like this existed, the common workaround for "I need a GIF of this Lottie" was screen-recording the animation playing in a browser and converting that recording to GIF — slow, blurry at the edges, and dependent on your monitor's refresh rate. Rendering directly from the Lottie JSON with lottie-web instead produces pixel-accurate frames at your exact chosen resolution and frame rate, with no capture artifacts, no cursor in the shot, and no need to have a player open at all.
Common problems and fixes
The GIF looks choppy compared to the Lottie preview: raise the fps — 15 fps is the default balance, but fast motion benefits from 24-30 fps at the cost of file size. Colors look wrong or banded: GIF is limited to a 256-color palette per frame, so animations with smooth gradients or photographic content will show visible banding; this is a GIF format limitation, not a bug — reduce gradient complexity in the source if it matters, or use Lottie to MP4 instead for full color fidelity. Conversion is slow or the tab freezes: this typically means the frame count is high (long animation × high fps) — trim the fps or check the frame-count warning shown near the fps selector.
Privacy and client-side conversion
Everything — parsing, rendering, palette quantization, GIF encoding — runs locally in your browser. Your animation is never sent to a server, which matters when you're converting unreleased product UI or client work under NDA. There are no upload limits, no queues, and no accounts; the only limits are practical ones (15MB input, 600 output frames) to keep the conversion fast on typical hardware. See our full Lottie converter toolkit for every conversion direction in one place.