Why your animated logo is 5 MB — and how to get it under 200 KB

Most online GIF makers hand you a file that looks right and cannot be used. This page explains precisely where those megabytes come from, using a real file, and what has to change to remove them.

A worked example

This project started from a real animated logo produced by a popular online GIF tool. It looked correct. It was also impossible to ship:

Two thirds of those 59 frames were byte-identical to the frame before them, and nothing deduplicated them. Simply recompressing that same file — no re-render, one command — brought it to 294 KB. Re-rendering the identical animation at a sensible 640 px gives 109 KB as GIF, or 58 KB as SVG.

That is not a small optimisation. It is the difference between an asset you can put in an email signature and one you cannot use at all.

Where the weight actually comes from

1. Exporting at source resolution

A logo displayed at 240 px does not need 1920 px of pixels, and GIF has no way to scale down on the fly. Every extra pixel is stored in every frame. Halving the longest edge removes roughly three quarters of the data before any other optimisation runs.

2. Full frames instead of differences

In a light sweep, most of the image is identical from one frame to the next — only the band of light moves. A naive encoder writes the whole picture 59 times anyway. Writing only the pixels that changed, and marking the rest transparent so the previous frame shows through, is worth about 3.2× on its own: on our default preset at 640 px it takes the export from 433 KB to 134 KB.

This has one hard limit worth knowing. It only works while the subject's transparency is constant across the loop. A pan or a zoom changes which pixels are opaque, so the trick becomes unsafe and the encoder has to fall back to full frames. That is why a zooming logo is several times larger than a sweeping one, and why those effects are better run at 15 fps.

3. A palette per frame

GIF stores at most 256 colours. Most tools compute a fresh palette for every frame, which causes visible colour flicker on gradients and makes each frame incompressible against its predecessor. One palette sampled across the whole loop fixes both at once.

4. Frame rate treated as quality

25 fps is video thinking. A logo sweep reads perfectly at 20 fps, and camera moves are fine at 15. Dropping from 25 to 15 removes 40% of the frames and almost none of the perceived smoothness.

The one that is not a GIF at all

If the animation is a gradient moving across artwork — which is what a shine, gleam or sweep is — it does not need to be stored as frames. It can be described as markup: the image embedded once, plus a gradient and a CSS keyframe. That is an animated SVG, it has full 8-bit transparency instead of GIF's 1-bit, it stays crisp at any size, and on our sample logo it is 58 KB against 109 KB.

It is a web format, so it is not for email. For a website header it is strictly better than the GIF.

Practical targets

Frequently asked