Lottie vs GIF: Which Animation Format Should Your App Use?
Lottie vs GIF compared for apps and websites: file size, quality, transparency, performance and control, plus where dotLottie and video fit and when a GIF is still the right choice.
By Abdul Rafay··6 min read
Most apps need a handful of small animations: a loader, a success tick, an empty state, an onboarding scene. They can be delivered as a GIF, a Lottie file or a short video, and the choice affects app size, how sharp the animation looks and how smoothly the screen runs. Here is how the formats compare and which to pick for each job.
The difference in one paragraph
A GIF is a sequence of pictures: every frame is stored as pixels. A Lottie file is a set of instructions: shapes, colours and how they move, which the app draws as it plays. Pictures are simple to show anywhere but get heavy and blurry when scaled; instructions stay small and sharp but need a player to draw them.
Side by side
- Made of
- GIF: Pixel frames
- Lottie (.json / .lottie): Vector shapes and keyframes
- Video (MP4 / WebM): Compressed pixel frames
- Sharp at any size
- GIF: No
- Lottie (.json / .lottie): Yes
- Video (MP4 / WebM): No
- Colours
- GIF: Up to 256 per frame
- Lottie (.json / .lottie): Full colour
- Video (MP4 / WebM): Full colour
- Transparency
- GIF: On or off per pixel, so edges look jagged
- Lottie (.json / .lottie): Smooth
- Video (MP4 / WebM): Limited support
- File size for simple UI animation
- GIF: Large
- Lottie (.json / .lottie): Small
- Video (MP4 / WebM): Medium
- Control from code
- GIF: None
- Lottie (.json / .lottie): Play, pause, segments, speed, colours
- Video (MP4 / WebM): Play, pause, seek
- Needs a player
- GIF: No
- Lottie (.json / .lottie): Yes
- Video (MP4 / WebM): Built into browsers and phones
- Best for
- GIF: Emails, chats, READMEs
- Lottie (.json / .lottie): App and web interface animation
- Video (MP4 / WebM): Long, photographic or 3D scenes
| GIF | Lottie (.json / .lottie) | Video (MP4 / WebM) | |
|---|---|---|---|
| Made of | Pixel frames | Vector shapes and keyframes | Compressed pixel frames |
| Sharp at any size | No | Yes | No |
| Colours | Up to 256 per frame | Full colour | Full colour |
| Transparency | On or off per pixel, so edges look jagged | Smooth | Limited support |
| File size for simple UI animation | Large | Small | Medium |
| Control from code | None | Play, pause, segments, speed, colours | Play, pause, seek |
| Needs a player | No | Yes | Built into browsers and phones |
| Best for | Emails, chats, READMEs | App and web interface animation | Long, photographic or 3D scenes |
Where Lottie wins
- Size
- A simple loader or tick is usually a few kilobytes as Lottie. The same animation as a GIF, at a size that looks sharp on a modern phone, is often many times larger.
- Sharpness
- Vector shapes are drawn at the screen's resolution, so one file looks crisp on a small phone and a large tablet.
- Control
- The app can play part of an animation, stop on a frame, change speed or recolour it for dark mode, all from one file.
- Transparency
- Lottie sits cleanly on any background. A GIF's on-or-off transparency leaves rough edges on anything but the colour it was made for.
Where Lottie loses
- It needs a player
- Apps and websites need a library such as lottie-react-native or a web player. Emails and most chat apps cannot play Lottie at all.
- Complex files are expensive to draw
- The device draws every frame. Animations with many layers, masks, mattes or embedded images can drop frames on low-end phones, where a video would play smoothly.
- Not every effect exports
- Lottie supports a subset of After Effects features. Some effects, such as certain blurs and expressions, do not export or look different.
Where dotLottie fits
dotLottie (.lottie) is the same animation data in a zipped package. Files are usually much smaller than the matching .json, and one package can hold several animations, their images and colour themes. Current players, including lottie-react-native and the dotLottie web players, support it. If you are choosing today, prefer .lottie for anything shipped in an app or loaded over the network, and keep .json for tools that only accept JSON. You can convert a JSON file to .lottie in your browser with the free Lottie preview tool.
Which format to use
- Loader, success tick, error, empty state
- Best format: Lottie
- Onboarding and feature illustrations
- Best format: Lottie
- Animated icon or button that reacts to taps
- Best format: Lottie
- Product demo, screen recording or 3D render
- Best format: Video
- Long background scene with photographs
- Best format: Video
- Email, Slack message or GitHub README
- Best format: GIF
- A simple fade, slide or scale
- Best format: Code (CSS, Reanimated, Framer Motion), no file at all
| Use | Best format |
|---|---|
| Loader, success tick, error, empty state | Lottie |
| Onboarding and feature illustrations | Lottie |
| Animated icon or button that reacts to taps | Lottie |
| Product demo, screen recording or 3D render | Video |
| Long background scene with photographs | Video |
| Email, Slack message or GitHub README | GIF |
| A simple fade, slide or scale | Code (CSS, Reanimated, Framer Motion), no file at all |
Converting between formats
Lottie to GIF or video is easy: render the frames and encode them, which many Lottie editors do in one click. GIF or video to Lottie is not really possible, because pixels cannot be turned back into clean shapes. If you have a GIF you want as Lottie, it has to be redrawn as vector animation.
The short answer
Use Lottie, preferably as .lottie, for animation inside your app or website. Use video for long, photographic or 3D content. Keep GIF for places that cannot run a player, such as emails and chats. And for simple movement, write it in code and ship no file at all.
Frequently asked questions
- Is Lottie smaller than a GIF?
- For vector interface animation such as loaders and icons, yes, usually by a wide margin. A Lottie file with embedded photographs can be larger, and for that kind of content a video is a better choice.
- Does Lottie affect app performance?
- Simple Lottie files are cheap to play. Complex ones with many layers, masks or images, or many animations playing at once, can drop frames on low-end phones.
- What is the difference between .json and .lottie?
- Both contain the same animation. A .lottie file is a zipped package that is usually much smaller and can also hold images, several animations and colour themes.
- Can I convert a GIF to Lottie?
- Not automatically in any useful way. A GIF stores pixels, and Lottie needs vector shapes, so the animation has to be redrawn.