Skip to content
SimpleTools24

How GIF Transparency Works (and Why It Looks Jagged)

By SimpleTools24Published 4 min read

GIF transparency works by marking one colour in the image's palette as "transparent". Any pixel using that palette entry isn't drawn, so whatever is behind the image shows through. Every other pixel is fully opaque. There are no partially transparent pixels, which is why transparent GIFs often have jagged or haloed edges compared with PNG or WebP, where each pixel can have its own level of transparency.

The Palette: 256 Colours per Frame

A GIF doesn't store full colour for each pixel. Instead, each frame (or the whole file) has a colour table of up to 256 colours, and each pixel stores an index into that table. That's why GIFs of photos look posterised or dithered: millions of colours have to be squeezed into 256.

Transparency piggybacks on this system. One of those 256 entries is designated as the transparent index, so a frame can show up to 255 visible colours plus "nothing".

Where Transparency Is Set

The GIF89a specification added a block called the Graphic Control Extension before each image frame. It contains:

  • A transparency flag saying whether a transparent index is used.
  • The transparent colour index itself.
  • The frame's delay time in hundredths of a second.
  • The disposal method for what happens after the frame is shown.

The older GIF87a version had no transparency or animation timing at all. Every transparent or animated GIF is GIF89a. You can see the GIF89a signature at the start of the file in a binary file viewer.

Why Edges Look Jagged: 1-Bit Alpha

Anti-aliased artwork, such as text or a cartoon outline, smooths edges with in-between pixels that blend the subject and background colours. In a PNG with an alpha channel, those edge pixels can be partly transparent, so they blend smoothly with any new background.

GIF can't do that. Each edge pixel must be either:

  • Transparent, which makes the outline thinner and stair-stepped, or
  • Opaque, keeping its blended colour, which still contains some of the old background.

If that old background was white and the new one is dark, those kept pixels form a light fringe. That's the classic white halo, covered in how to fix a white halo on a transparent GIF.

Transparency support in common image formats
FormatTransparency typeSoft edgesAnimation
GIFOne transparent palette colour (1-bit)NoYes
PNGFull alpha channel (8-bit or more)YesNo (APNG adds it)
APNGFull alpha channelYesYes
WebPFull alpha channelYesYes
JPEGNoneNoNo

Transparency and Animation: Disposal Methods

In an animated GIF, frames are often smaller rectangles drawn over the previous frame, to save space. The disposal method tells the viewer what to do with a frame's area before drawing the next one:

  • Unspecified / do not dispose: leave it as is; the next frame draws on top.
  • Restore to background: clear the area (in practice, to transparent in most browsers).
  • Restore to previous: put back what was there before the frame was drawn.

Transparency and disposal interact. If a frame with transparent pixels is drawn over a previous frame that wasn't disposed, the earlier frame shows through those transparent pixels. That's normal and intended for optimised GIFs, but when a background has been removed, leftover pixels from earlier frames can create ghosting trails if disposal isn't handled.

This is why a GIF background remover can't just process each frame's raw rectangle. It has to composite each frame as the viewer would see it, remove the background from the full picture, and write frames with disposal settings that clear properly.

How Background Removal Uses This

To make a GIF transparent, a tool:

  1. Composites each frame in order, applying disposal methods.
  2. Identifies background pixels by colour (and, often, by connection to the edges).
  3. Assigns those pixels to the transparent palette index.
  4. Decides, pixel by pixel, what to do with blended edges.
  5. Re-encodes the frames with correct delays, loop count and disposal.

The GIF background remover works this way: frames are composited with their disposal methods, background is removed by colour matching and flood fill, and the edge softness setting estimates how much of each outline pixel is background. Mostly-background pixels are removed; the rest have the background colour subtracted out to reduce fringes. Timing and looping are copied from the original. The full steps are in how to remove the background from a GIF.

When to Use Another Format

If smooth edges over varied backgrounds matter, GIF's 1-bit transparency will always be a compromise. Animated WebP and APNG support full alpha, and most modern browsers display them. GIF vs APNG vs WebP compares them, including where GIF is still the only option.

Frequently Asked Questions

Can a GIF be semi-transparent?

No. Each pixel is either fully transparent or fully opaque.

Why does my transparent GIF have a white outline?

The edge pixels were blended with a white background when the GIF was made, and GIF can't make them partly transparent.

Can each frame have a different transparent colour?

Yes. Each frame's Graphic Control Extension can set its own transparent index, and frames can have their own colour tables.

Does transparency make a GIF bigger?

Not much. Large transparent areas often compress well, so files can even get smaller.

Summary

GIF transparency is one palette colour that isn't drawn. It's simple and universally supported, but 1-bit, so edges can't blend smoothly, and animated GIFs need careful compositing and disposal handling to stay clean.

Sources