GIF is a 1987 format and you are probably still exporting one

Why the animated GIF is so large

GIF was designed in 1987 for dial-up bulletin boards, and two of its design decisions are why a three-second clip becomes a four-megabyte file.

It has 256 colours per frame. Every frame is an index into a small palette. A photograph has far more than 256 distinct colours, so the encoder must either post it to the nearest palette entry (producing visible banding) or dither, scattering pixels of two palette colours to fake a third. Dithering looks acceptable and it is catastrophic for file size, because it replaces smooth areas that would have compressed to nothing with high-frequency noise that compresses to almost nothing saved.

It has no motion compensation. Modern video codecs describe a frame as this block moved eleven pixels left. GIF can skip unchanged regions between frames and that is all. Pan the camera and every pixel changes, so every frame is stored nearly in full.

The result, for a typical 3-second 800-pixel clip: GIF around 4 MB, the same clip as H.264 MP4 around 250 KB. Sixteen times the data for a worse picture.

The four things you can deliver instead

• MP4 / H.264 video. Smallest by a wide margin, full colour, hardware-decoded so it costs almost no battery. Use it for anything longer than about a second or with real motion.
• WebM / VP9 or AV1. Smaller again, supports real alpha transparency, which MP4 effectively does not. This is how a transparent animated logo gets onto a page.
• Animated WebP. Full colour, alpha, and roughly 20 to 40 per cent the size of the equivalent GIF. Supported by current browsers. Convenient because it is still an image, so it drops into an <img> tag with no player.
• APNG. Full colour, proper alpha, lossless. Larger than animated WebP but the right answer for pixel-exact UI animation and small loops where lossy compression would show.

Making a video behave like a GIF

The reason people reach for GIF is that it plays by itself. A video can do the same:

<video autoplay muted loop playsinline width="800" height="450">
  <source src="clip.webm" type="video/webm">
  <source src="clip.mp4" type="video/mp4">
</video>

All four attributes are load-bearing. muted is required or mobile browsers refuse to autoplay at all. playsinline stops iOS taking it fullscreen. loop replaces the GIF’s loop flag. autoplay without muted silently does nothing, which is the commonest reason a developer says the video does not work.

Conversion, free, one line:

ffmpeg -i in.gif -movflags faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" out.mp4

The scale filter is there because H.264 requires even dimensions and a 801-pixel GIF will otherwise fail with an unhelpful error. faststart moves the index to the front of the file so playback can begin before the whole thing arrives.

When GIF is still the answer

Honest cases remain, and they are all about where the file is going rather than what is in it.

Messaging apps, older email clients, some chat platforms and a number of content management systems accept an image and will not accept a video. A GIF plays there; an MP4 becomes an attachment nobody opens. Platform behaviour, not technical merit, is the reason.

If you must ship one, cut the cost deliberately: reduce to 480 pixels wide, drop to 12 or 15 frames per second, keep it under two seconds, and use gifsicle -O3 --lossy=80 or gifski, which builds a far better palette per frame than most exporters. A disciplined GIF is 600 KB rather than 4 MB.

Cinemagraphs, which are a raster editing job

The most useful moving image an image editor makes is the one where almost nothing moves: steam rising from a cup in an otherwise frozen photograph, a single flag moving, the rest still.

The construction is exactly the mask work from module three, applied to time. Take a locked-off clip on a tripod, pick one frame as the still base, put the video layer above it, and mask the video so only the region that should move is visible. Because the static 95 per cent of the frame is identical between frames, every codec compresses it to nearly nothing: a cinemagraph is often smaller than a still-plus-video would suggest, and far more striking than a full-motion loop.

Free path: shoot on a phone on a tripod or propped against a book, then GIMP with GAP, Krita’s animation workspace, or Blender’s video sequencer, all of which will hold a masked layer over a clip. DaVinci Resolve’s free edition does it comfortably.

The accessibility rule that is also a legal one in places

Anything that flashes more than three times per second can trigger a seizure. This is not a style preference; it is in the Web Content Accessibility Guidelines and it is referenced by accessibility law in several countries.

Give any autoplaying loop longer than about five seconds a way to stop it, and never build strobing or rapidly inverting animation. If a client asks for one, say why not.

Today: take any GIF you have, run the ffmpeg command above, and compare the two file sizes. The ratio is usually between ten and twenty to one, and it is the clearest argument you will ever have with somebody who wants a GIF.