GIF File
Definition
The Graphics Interchange Format was created by CompuServe in 1987 and revised as GIF89a in 1989, which is the version everything still uses. It applies LZW lossless compression, but only after the image has been reduced to a palette of at most 256 colours chosen from the full 24-bit space — so the compression itself loses nothing while the palette step throws away a great deal. Transparency is binary: a pixel is either fully transparent or fully opaque, with no partial alpha, which is why GIF edges look ragged over a coloured background. Animation comes from a sequence of frames with per-frame delays, and the endless loop everyone expects is set by a Netscape application extension block. Files begin with the ASCII bytes GIF87a or GIF89a and are served as image/gif.
Why It Matters
The cost of a GIF is measured in megabytes it did not need to spend. A five-second screen recording at 640 by 360 commonly lands at 8 to 12 MB as a GIF; the same clip encoded as H.264 at a moderate quality setting is 300 to 500 KB, so the video is twenty times lighter and looks better because it is not restricted to 256 colours. Photographs and gradients suffer worst, banding into visible stripes or picking up dithering noise. There is an accessibility cost too: an autoplaying GIF cannot be paused, ignores a visitor's reduced motion preference, and keeps looping at whoever is trying to read the paragraph next to it. The one place GIF still earns its keep is a tiny, few-frame animation where compatibility with very old software matters more than bytes.
How It Works
Each frame is indexed against a global or local colour table, then compressed row by row with LZW; later frames may store only the rectangle that changed, which is why a static background costs little and a panning camera costs everything. Dithering scatters pixels between palette entries to fake missing colours, trading banding for noise and, incidentally, for a larger file — noise compresses badly. Converting away is a single command: ffmpeg -i clip.gif -c:v libx264 -crf 28 -pix_fmt yuv420p -movflags +faststart clip.mp4, with a WebM encoded alongside if you want the smaller option first. Drop the result into a video element with the muted, loop, autoplay and playsinline attributes and it behaves exactly like an animated image, including inline playback on iOS.
Real-World Example
A founder records a 40-second product walkthrough and exports it as a GIF, 9.4 MB, for the tour page hosted on 99helpers at app-tour.99helpers.site. Converted locally with ffmpeg, the MP4 is 1.1 MB and the WebM 780 KB, and both are uploaded beside the original page. The tour page drops from 10 MB to under 1.5 MB, and the playback controls mean a visitor can stop it. Nothing was transcoded on the way in — 99helpers stores what you give it, so ffmpeg runs on your machine first.
Common Mistakes
- ✕Exporting a screen recording as a GIF because it is going in a web page — the resulting file is often twenty times a video of the same clip
- ✕Using GIF for a photograph or a gradient — the 256-colour palette turns smooth tones into visible bands
- ✕Expecting soft transparent edges — GIF transparency is all or nothing, so anti-aliased edges keep a fringe of the background they were flattened against
- ✕Autoplaying a long looping GIF next to body text — it cannot be paused and it overrides nobody's motion preferences
Related Terms
MP4 File
An MP4 file is a container holding compressed video and audio together, most often H.264 video with AAC audio. It is the safest video file to put on a web page.
WebM File
WebM is an open, royalty-free video container holding VP8, VP9 or AV1 video with Vorbis or Opus audio. It usually produces a smaller file than an H.264 MP4 at the same quality.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Reduced Motion
Reduced motion is a setting people switch on at the operating system level to cut down animation, and a CSS media query that lets a page respect it. Honouring it takes a handful of lines.
Bandwidth Limit
A bandwidth limit is the total volume of data a host will send out on your behalf in a billing period, usually a month. It counts what leaves, not what is stored, so a tiny file can exhaust it and a huge one may never touch it.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →