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.
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.