gif vs png transparency issues

Question

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 any solution?

Its a two image header where a transparent image is placed over a normal image ..

We have a site layout used for 4 different clients.. So i use different style sheets ..

So in the style sheet i should add the logo of the client (which should be a transparent image) But right now in my computer i do not have any transparent issues.. but i read this article http://homepage.ntlworld.com/bobosola/pngtest.htm

and a bit worried about it's performance ..

Answer 1

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: http://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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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.