Is .png a compatible format

[GovornorPhatt]

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?

 

[mnkeybsness]

unless you are using alpha transparency, png (portable network graphics) is a great format. i've always used the photoshop "save for web..." option

 

[GovornorPhatt]

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?

 

[Makosuke]

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).

 

[Rower_CPU]

...
(though PNG actually has transparency features far surpassing anything a GIF can do, they might not work on some recent versions of IE)
...

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?!?

 

[TEG]

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?!?

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

 

[mnkeybsness]

WTF, MS?!?

the following javascript will force MSIE to display alpha transparency with png images... it's nice...

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);

 

[whocares]

Why the hell can't MS include this directly in *their* code for IE?

the following javascript will force MSIE to display alpha transparency with png images... it's nice...

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;
(...)

 

[mnkeybsness]

Why the hell can't MS include this directly in *their* code for IE?

because that would be logical

 

[Makosuke]

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.

 

[Rower_CPU]

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/

 

[bnemesis]

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 ) 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.