Results 1 to 8 of 8
  1. #1
    Join Date
    Apr 2008
    Location
    Australia
    Posts
    12

    Question Best Transparency Handler? GIF or PNG?

    What is the best image format for transparency?

    GIF or PNG? for web sites.
    JANDA DESIGNS - Professional Custom Web Design
    - www.jandadesigns.com.au
    JANDA Hosting Division - Quality Web Hosting and Low Cost Domain Registration
    - www.jandahost.com

  2. #2
    Join Date
    Dec 2004
    Posts
    729
    PNG will offer more color choices, I believe you are limited to 255 colors with a GIF. PNG's are typically higher quality images. However do to incompatibilities, some browser (IE6) are not able to render transparency in PNG's without an external script.

    If it will work, the filesize of a GIF will be better, though now a days most people have highspeed internet, so it the difference shouldn't make that much of a difference.
    Who is General Fault, and why is he reading my disk?

  3. #3
    Join Date
    Apr 2008
    Location
    Australia
    Posts
    12
    Well, I recently re-vamped our website jandadesigns.com.au and in IE6 the png images along the left side show as white, where as in firefox and operah and IE7 they work fine
    JANDA DESIGNS - Professional Custom Web Design
    - www.jandadesigns.com.au
    JANDA Hosting Division - Quality Web Hosting and Low Cost Domain Registration
    - www.jandahost.com

  4. #4
    Join Date
    Oct 2004
    Location
    Shimonoseki
    Posts
    2,101
    PNGs are lossless images and provides perfect transparency. However they are big in size, and not directly supported in IE6. But there is a workaround:
    Say you want to put a 200x100 transparent PNG image:
    HTML Code:
    <img src="spacer.gif" width="200" height="100" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod=scale)" />
    the [spacer.gif] in above example is 1x1 size transparent GIF image. You have to set width and height to the original PNG image size.
    Closed for winter...

  5. #5
    With the gif format, each pixel is either "transparent" or "not transparent" (so if you want a nice anti-aliased gif icon you must save it against the correct colour background), but png gives you a proper alpha channel, allowing varying amounts of transparency.

    As other posters have pointed out, png transparency isn't supported by IE6 and below, however there are a few tricks out there for getting around this, but of course it is your decision as a webmaster as to whether it is worthwhile making the extra effort for non-current browser versions.

    Helen
    Blue Room Hosting - High availability UK VPS
    KVM Plans - Multiple OS support. Virtual console and CD drive.

  6. #6
    GIFs are great if you have an image with a couple of colors or transparency that is either "on" or "off". GIFs are horrible at rendering transparent pictures with anti-aliasing, because it will leave "white" pixels around the aliased part of the image.

    With PNGs however you can do almost anything you need to as far as transparency, but you sacrifice cross-browser compatibility and file size. As we move forward into the future PNGs will become more and more common, and eventually replace GIFs IMO. That is, unless, some new format comes out that is better.

  7. #7
    Join Date
    Jan 2008
    Location
    St. John's, NL
    Posts
    2,114
    PNGs work with IE7+ and every other browser out there. Transparency included.

    If you need it on IE 5.5/6, use IE7-js (http://ie7-js.googlecode.com). It will make them able to handle transparent PNGs, as long as they are not background images.
    Cpanel/WHM PHP Perl Ruby Full Time Support
    LCWSoft - Canada web hosting (based in Newfoundland) since 2007
    Servers based in the US and Canada (Uptime Report)

  8. #8
    as other says, png need workaround for compatiblity, i must said if your image still look goods using .gif, just use .gif

Posting Permissions

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