Converting PNG to GIF with transparency

Content
1

Hi,

I have a small .png icon (32x32) with rounded corners and transparent background that I want to convert to .gif. I will use it on different background colors that’s why I want it transparent.

Here is the .png file:

Here is the .gif file:

If you view them on black background, you will notice how the .gif file looks bad. How should I do the conversion so that I will not lose transparency?

Thanks for any ideas.

2

The original has some shadow on it that the gif format is struggling with. Why do you need it to be a gif? You could trim off the shaddow first and then save as gif. That will give a better result.

3

I don’t really know what you have against the original image? Though you could decrease the colour depth to 256 and retain single transparency and have a smaller PNG-8 file instead of an outmoded GIF but you aren’t likely to get the same smoothness as the original and still have the same issue it will be full transparency only.

4

I will use it on a mobile site. (JPG and GIF are recommended, PNG is not yet.) Do you think it will be safe to use PNG?

The best I could achieve with a .gif is this one:

But the corners are not smoothly rounded. It seems .gif does not support transparency on colored pixels (indexed colors) hence it is not possible to have smoothly rounded corners with a transparent .gif file.

5

It’s fine on the main smart phones like iOS, Android and on Opera Mini, but I’m not sure about other devices.

6

If I were you, I would use the original one in PNG and then add in a snip of coding to auto detect the smart phone OS and then if needed, substitute it with the GIF you posted just above. Cuz like ralph said, it’s fine on the main smart phone OS’ out there.

7

You do know that you are using a 24-bvit PNG? PNG24 supports alpha-channels, that is semi-transparency, gif and PNG8 doesnt. The “nice” shaddow" color you see is really multiple different levels of transparency on the “black”. As GIFs only have one level of transparency (on/off) what you are seeing is the “rounding off” effect. Anything that is more than 50% transparent will be opaque ( pure black) anything else will be totally transparent. If you want that smooth face you either have to fake it with a nontransparent image, or use PNG24.