6

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

eozzy
  • 66,048
  • 104
  • 272
  • 428

6 Answers6

20

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.

jakber
  • 3,549
  • 20
  • 20
  • 2
    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. – Paulo Santos Dec 23 '09 at 12:03
  • Can't you use dithering to get fake partial transparency? That won't help with smooth edges but will help with shadows and things – Heath Mitchell May 14 '21 at 19:17
1

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.

Nate B
  • 6,338
  • 25
  • 23
  • 3
    Because of alpha information not being 0 or 1 but any value from 0 (transparent) to 255 (opaque), and not because of anti-aliasing. – xryl669 Oct 05 '16 at 12:02
1

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.

Firas Assaad
  • 25,006
  • 16
  • 61
  • 78
1

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;
Maria Violeta
  • 27
  • 6
0

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.

icabod
  • 6,992
  • 25
  • 41
0

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.

geekley
  • 1,231
  • 10
  • 27