Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 3 123 LastLast
Results 1 to 15 of 33
  1. #1
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts

    PNG instead of GIF?

    Just out of interest, should new websites use GIFs or PNGs?
    I know some very old browsers dont support them...

    What are your thoughts?

  • #2
    Master Coder
    Join Date
    Jun 2003
    Location
    Cottage Grove, Minnesota
    Posts
    9,472
    Thanks
    8
    Thanked 1,085 Times in 1,076 Posts
    I like PNG's simply because they support more colors than GIF.
    You're right about IE5,6 (and 7?) ... PNG support is bad.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    PNG support is perfect in all major and many minor browsers. The only thing that’s not supported natively is alpha transparency in IE 6 (but there are workarounds). And yes, PNG is supposed to be the preferred format for web graphics.

  • #4
    New Coder
    Join Date
    Feb 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes - true that the GIFs are more dull. But at the same time PNG images can make a website load slow as these images are larger in size. I would prefer JPG.

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    There is no either/or, both formats (JPEG and PNG) serve completely different purposes. Please browse the forum for similar discussions before you spread ill-conceived claims, I don’t wanna repeat myself.

  • #6
    New Coder
    Join Date
    Feb 2010
    Location
    New Zealand
    Posts
    76
    Thanks
    7
    Thanked 10 Times in 9 Posts
    Use the PNG Fix to handle transparency in older IE browsers...

    Code:
    /*
    Correctly handle PNG transparency in Win IE 5.5 & 6.
    
    Use in <HEAD> with DEFER keyword wrapped in conditional comments:
    <!--[if lt IE 7]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    
    */
    
    var arVersion = navigator.appVersion.split("MSIE")
    var version = parseFloat(arVersion[1])
    
    if ((version >= 5.5) && (document.body.filters)) 
    {
       for(var i=0; i<document.images.length; i++)
       {
          var img = document.images[i]
          var imgName = img.src.toUpperCase()
          if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
          {
             var imgID = (img.id) ? "id='" + img.id + "' " : ""
             var imgClass = (img.className) ? "class='" + img.className + "' " : ""
             var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
             var imgStyle = "display:inline-block;" + img.style.cssText 
             if (img.align == "left") imgStyle = "float:left;" + imgStyle
             if (img.align == "right") imgStyle = "float:right;" + imgStyle
             if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
             var strNewHTML = "<span " + imgID + imgClass + imgTitle
             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
             img.outerHTML = strNewHTML
             i = i-1
          }
       }
    }

  • #7
    Regular Coder
    Join Date
    Sep 2007
    Posts
    238
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thanks for the replies.
    I wont be using PNG's transparency capabilities - just flat images with a white background.
    Also, from what I've seen saving from Photoshop/Illustrator, they are a little smaller in filesize than a GIF.

    Google also use PNG, so I think I'll go with that

  • #8
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You may need to fix the png gamma issue with IE.
    http://f6design.com/journal/2006/12/...ing-png-gamma/
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #9
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    As for the file size, you cannot say that any image will weight less when saved as JPG than PNG.

    PNG can be much more efficient when the image is simple and with a small color palette. PNG is pretty much lossless, while JPG isn't. In PNG you can set BPP (bits per color) - JPG is restricted to 24BPP (or 8BPP for grayscale).

    On my website I use GIF's only for animated images, JPG's for detail- and color-rich images, and PNG's for everything else (like layout elements).
    Last edited by Mochentes; 02-25-2010 at 08:43 PM.

  • #10
    New Coder
    Join Date
    Mar 2010
    Location
    New York
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post
    PNGs are fantastic. I use them alot. One could argue I use them too much, but still, I'll advocate for PNGs for as long as possible, until most major browsers start providing full support for TGAs. hehe.. just imagine completely lossless images filling up the web.. That would be fun.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    PNGs are lossless, though?

  • #12
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    I use GIF as much as possible, way way faster to load by being a smaller file, and they are good at being transparent. PNG are huge files.
    Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?

  • #13
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    If your PNGs are huge, you're doing it wrong. You may want to look into PNG-8--these have similar constraints as GIFs, except allow alpha transparency AND have a lower file size.

  • #14
    New Coder
    Join Date
    Feb 2010
    Location
    New Zealand
    Posts
    76
    Thanks
    7
    Thanked 10 Times in 9 Posts
    PNG high in colours and using semi-transparent can be huge in size. PNG-8 seems quite good to use too to keep down this size.

    I also found PNGOut compression software quite good to use to crutch the PNG format even more without losing any quality. It's best to save in a few formats like JPG, GIF as well as PNG and compress, picking the best quality / smaller file size.

  • #15
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    When I save a PNG it comes out huge. Like I will save a banner as GIF and it comes to 84kb but when I save as PNG it's 155kb
    Rowsdower! has accused me of having mental problems, and the administrator allowed it. What a great forum huh?


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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