How to get better transparency with GIFs?

Question

Is there any software, plugin or technique that would allow creating/exporting PNG-like GIFs with smooth transparent edges, at least for smaller images like bullets or buttons.

I really have to use GIFs sometimes for IE6 so it'd would be great to know if such a tool exists?

Thanks

Eudemon

Answer 1

No, the GIF format does not support alpha-channel transparency like PNG does. You can only select one out of the 256 possible colors in a GIF to be transparent.

If you know roughly what color the background will be, the best you can do is create the GIF with the same background you plan to use it on, then select the background color as transparent. The smooth edges will look smooth against that specific background, but horrible against other colors.

Wardle

However you can minimize the effects by carefully building up the GIF to reduce the ragged edges. You can also look for IE6 png fix. – Envenom

Can't you use dithering to get fake partial transparency? That won't help with smooth edges but will help with shadows and things – Fortner

Answer 2

The edges in a PNG are smooth because of anti-aliasing, and thus, variable opacity. The GIF format doesn't support this, so unfortunately no there isn't a way to do it.

Maness

Because of alpha information not being 0 or 1 but any value from 0 (transparent) to 255 (opaque), and not because of anti-aliasing. – Resentment

Answer 3

GIF doesn't have an alpha channel like PNG, so you can't get smooth transparent edges. The alpha channel specifies how transparent each pixel is, so you could have half-transparent pixels for example. GIF on the other hand is limited to 8 bit colors and one of them is designated as the transparent color.

Debonair

Answer 4

yes, a GIF can be transparent, just use png transparent frames and when embedded in css it would have a transparent background.

background: url(../images/mundog.gif) no-repeat;

Dialectician

Answer 5

As far as I recall (I've not used GIFs for quite some time), a GIF doesn't have a variable transparency - a pixel is either transparent or not. You could simulate transparency by blending with the background image, but that would rely on having a static, defined background.

Palladino

Answer 6

The modern solution for this is using WebP instead of GIF.
WebP supports both animation and an alpha channel, as well as lossless compression.
It's well-suported by browsers nowadays.

History