SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Converting PNG to GIF with transparency

    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:

    facebook.png

    Here is the .gif file:

    facebook.gif

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    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. #3
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Addict
    Join Date
    Nov 2009
    Posts
    310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    facebook.gif

    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. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,165
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    It's fine on the main smart phones like iOS, Android and on Opera Mini, but I'm not sure about other devices.

    http://caniuse.com/png-alpha

  6. #6
    Non-Member
    Join Date
    Sep 2007
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •