: Gif vs png transparency issues I am going to use an image for my header which should to transparent..i thought of using PNG but a bit worried about its transparency issues .. So is there

@Caterina889

This question is very old.

With Microsoft dropping support for Internet Explore 6, all modern web browsers now support png transparency. There is no longer any need for the hacks presented in some of the answers here.

Whether or not to use gif or png now simply comes down to file size and color support. Gif is still better for large areas of flat color or animation. But PNG is a viable solution in many instances.

Vote Up Vote Down

@Si6392903

PNG with transparency works fine without any hacks for over 99% of users (with exception of China where IE6 isn't quite dead yet).

If you use PNG8+alpha format then it will work great in all modern and not-so-modern browsers, degrade gracefully in the very old ones, and you'll get small file size too.

You'll need a converter, because Photoshop can't create those files.

Vote Up Vote Down

@Cugini998

A quick solution is to use one of the large number of "pngfix" libraries. Depending on your dependancy issues, you could use a jQuery pngFix or a javascript less solution (HTC solution) iepngfix.htc

Vote Up Vote Down

@Vandalay110

The page you linked has a solution: to use a PNG with transparency, you need to fake it out for specific browsers ( from that link there is also a MS support page see: support.microsoft.com/default.aspx?scid=kb;en-us;294714 )

The advantage the PNG has in this case is that it supports alpha channels which essentially allows 256 levels of transparency (from opaque to clear). GIF only supports a single color for transparency and that is why there is a halo.

The workaround for GIF halos is to use a background color which is compatible with the GIF. The workaround for PNG is to use javascript swap out any PNG images for a div container with special properties.

Neither is a bullet proof method.

Vote Up Vote Down

@Speyer780

PNG is fine for transparency. In my experience it's a question of how many colors your image has, and how big it ends up being. For vector I tend towards GIF and for raster I like PNG, but there's no hard-and-fast rule.

Experiment in the Save For Web dialog in Photoshop and play around with the colors. See how many you can reduce it to without compromising quality.

Vote Up Vote Down