GIF, WebP, APNG,
and which to use.
GIF is thirty five years old, capped at 256 colours, and still the default for a looping clip. Two better formats exist and both are widely supported now. Here is what each one costs and where GIF is still the right answer.
The three formats
| Format | Colours | Alpha | Typical size |
|---|---|---|---|
| GIF | 256 per frame | 1 bit, on or off | Baseline |
| WebP | Full 24 bit | 8 bit, smooth | 20 to 40% of GIF |
| APNG | Full 24 bit | 8 bit, smooth | 40 to 60% of GIF |
The numbers move with content. A screen recording of flat interface colour compresses well in all three. A gradient or a video clip is where GIF collapses, because 256 colours cannot describe a gradient and the encoder has to dither, which adds noise that then compresses badly.
Why GIF banding happens
A GIF holds a palette of at most 256 colours per frame. Encoding picks the best 256 for your clip and maps every pixel to the nearest one. On a photograph or a gradient the nearest is often visibly wrong, which is the banding you see.
Dithering scatters the error across neighbouring pixels so the eye averages it out. It genuinely looks better, and it makes the file larger, because the noise it introduces defeats the run length compression GIF relies on. That trade is the single biggest lever on GIF file size.
Compatibility in 2026
Animated WebP works in every current browser and in most messaging apps. It fails in older desktop image viewers and in some email clients, and it will not embed in a Word or Powerpoint file.
APNG works in every current browser too. Its advantage is that it degrades honestly: software that does not understand the animation shows the first frame as a normal PNG rather than a broken image.
GIF works absolutely everywhere, which is the entire reason to still use it. If the clip is going into a README, a support ticket, a chat client of unknown vintage or an email, GIF is the safe choice.
When to use a video instead
Past about five seconds, none of these formats is the right tool. An MP4 with H.264 will be several times smaller than the best animated image and will look better, because a video codec can reference earlier frames rather than storing each one.
The cost is that video needs a player and does not autoplay everywhere. On the web that is solved: a muted, looping, inline <video> autoplays in every browser and behaves like an animated image.
<video autoplay loop muted playsinline>
<source src="demo.mp4" type="video/mp4">
</video>All four attributes matter. Without muted and playsinline, iOS Safari refuses to autoplay and opens the video fullscreen instead.
Getting the size down
In order of how much they save for how little they cost:
- Cut the frame rate. Twelve to fifteen frames per second is fine for interface capture and roughly halves the file against 30.
- Crop to what matters. Half the pixels is half the work in every frame.
- Trim the clip. The first and last second are usually dead.
- Reduce colours, on GIF only, before you reach for dithering.
- Drop dithering entirely if the content is flat colour.
A rule of thumb
README or email, GIF. Web page under five seconds, WebP with a GIF fallback if you care about old clients. Anything longer, or anything with real video in it, MP4.