Is .png a compatible format

Discussion in 'Web Design and Development (archive)' started by GovornorPhatt, Mar 5, 2004.

  1. macrumors regular

    Joined:
    Dec 19, 2003
    Location:
    Where do YOU live?
    #1
    I was wondering wheter .png (portable network graphics) is a good format for compressing web images. I am working with still photographs and am initally concerned with the accesibility of the .png format. I use Macromedia fireworks MX 2004 and am curious about learning the new export options. Any tips as for compression?
     
  2. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #2
    unless you are using alpha transparency, png (portable network graphics) is a great format. i've always used the photoshop "save for web..." option
     
  3. thread starter macrumors regular

    Joined:
    Dec 19, 2003
    Location:
    Where do YOU live?
    #3
    Probably what I meant to say is, when should you use png and when shoud you use jpg or gif? Will png remain editable when exported for the web?
     
  4. macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #4
    I've wondered myself how widespread support for PNGs is in IE Win, but judging by the number of webcomics that use it, I assume it's safe to use these days.

    As for the original question, you can think of PNG as basically the same as what GIF covers, with the potential for extra features. If you're compressing a photo-type graphic, JPEG is the way to go, because that's designed for photos. If you're compressing lineart or a graphic graphic (bars, large areas of flat colors, etc), then either PNG or GIF will work, but PNG gives you the added option of more than 256 colors, and it's an open format.

    GIFs, unless you're going for compatibility with very old browsers, are best limited to animations and maybe things with transparency these days (though PNG actually has transparency features far surpassing anything a GIF can do, they might not work on some recent versions of IE).
     
  5. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #5
    That's the crux of the issue for me. Not a single version of IE/Win supports PNG's full alpha transparency capabilities (check this out. So, if we accept current figures of 90% of the market using IE/Win 4-6 (http://www.google.com/press/zeitgeist.html) that's a huge portion of the market using browsers that don't support an almost 8 year old standard.

    WTF, MS?!?
     
  6. TEG
    macrumors 604

    TEG

    Joined:
    Jan 21, 2002
    Location:
    Langley, Washington
    #6
    I think you answered your own question. It is M$, they only follow their own standards, that is why an .asp page looks the same on all computers, but an .htm/.html looks different on IE than on any other browser.

    I use .png for my transparent graphics on my website, and for my "new" avatar. Unfortunatly IE doesn't render the transparency on any version above 4, but it works for people who use real browsers.

    TEG
     
  7. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #7
    the following javascript will force MSIE to display alpha transparency with png images... it's nice...

    Code:
    function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.
       {
       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 
    		 var imgAttribs = img.attributes;
    		 for (var j=0; j<imgAttribs.length; j++)
    			{
    			var imgAttrib = imgAttribs[j];
    			if (imgAttrib.nodeName == "align")
    			   {		  
    			   if (imgAttrib.nodeValue == "left") imgStyle = "float:left;" + imgStyle
    			   if (imgAttrib.nodeValue == "right") imgStyle = "float:right;" + imgStyle
    			   break
    			   }
                }
    		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
    		 strNewHTML += " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
    	     strNewHTML += "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
    		 strNewHTML += "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>" 
    		 img.outerHTML = strNewHTML
    		 i = i-1
    	     }
          }
       }
    window.attachEvent("onload", correctPNG);
     
  8. macrumors 65816

    whocares

    Joined:
    Oct 9, 2002
    Location:
    :noitаɔo˩
    #8
    Why the hell can't MS include this directly in *their* code for IE? :rolleyes: :(


     
  9. macrumors 68030

    mnkeybsness

    Joined:
    Jun 25, 2001
    Location:
    Moneyapolis, Minnesota
    #9
    because that would be logical :D :D :D
     
  10. macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #10
    It's like the :hover property; it's been a standard since CSS2 was finalized in May of 1998, but can the IE folks be bothered to support it for anything but <a> tags? No, that would apparently be way too much work, so if you want to have a nice highlighted area in IE, you've either got to use a "blocked" a tag, or a big mess of Javascript to do it. Just stupid.

    Trying to force people into writing hacks for IE over standards made sense early on--if it only works in IE, and 90% of people are using IE, it's going to break every other browser and make IE look good to the uninformed--but what the heck is the point in not bothering to default support for transparent PNGs? It's not like they've got any vested interest in keeping the GIF format alive.

    Every time I try to write a standards compliant page that uses more than a styled paragraph or two, and care what it looks like on IE, I want to find the people responsible for that steaming pile of code and force them to spend the next month of their lives staring at sites composed entirely green text on a garish red background styled with nothing but <blink> and <marquee> tags.

    It seriously feels like they're intentionally making the lives of considerate web designers more difficult, just out of spite.
     
  11. Moderator emeritus

    Rower_CPU

    Joined:
    Oct 5, 2001
    Location:
    San Diego, CA
    #11
    TEG-
    It wasn't so much a question as an exclamation of frustration. ;)

    mnkeybsness-
    I've seen that javascript. It's just wrong that you have to use a hack to get IE to support standards properly. :(

    Makosuke-
    Interestingly enough, Eric Meyer recently pointed to an online example of someone's work at adding some basic CSS2 support to IE.

    http://dean.edwards.name/IE7/
     
  12. macrumors regular

    Joined:
    Jul 31, 2003
    #12
    i love the alpha transparency that png provides.
    Too bad I can make use of it because of the satanic browser that everyone has mentioned already.

    Other then that, the only other thing that is a little weird with png is that some browsers ($%^&-ing IE :mad: ) will apply their own gamma settings to png images and not gif images. This is bad if you are trying to build effects that match colors generated by css (like round bordered tabs that sit on top of a css colored border). You will see that the png image gamma is usually a little darker, and it kind of mucks things up.

    If I remember right, Opera and Gecko based browsers get it right ( i think...).
    It all depends on what you want to your png to do, i guess.

    BTW, this was all tested on windows based machines. I dont know if the Mac versions of said software work differantly or not.
     

Share This Page