I am using a template that is full of .png images. Are these OK? Can they be seen with any browser, or should I change them to gifs?
I might be mistaken, but I don't think IE recognizes the PNG file type yet. Firefox does though...if my memory serves me correctly
that's weird, I use IE and can see them fine... if anyone can confirm this I'd appreciate it, it has loads of images and changing their extension would be a real pain
PNG has been fully accepted as a successor to GIF and JPEG : No weird patents, fully open source and implemented as such in most modern browsers. While I'm typing this I just think about google images.. let me check ok. google images also understands png files: http://images.google.com/images?q=png&hl=en Netscape 0.9beta users will complain tough
IE 6 handles .pngs fine except IE 6 will not properly display a .png with an alpha channel, where as Firefox will. That is how some sites get that cool transparent look to them in Firefox, while they show up as plain coloured backgrounds in IE.
@LGRComp: you can work around this by putting the PNG (or any other image) in a DIV that has a "FILTER: ALPHA(opacity=x)" style.
Cool... I have just been glued to my computer for the last 10 hours finishing a site, and having to change my images would of taken a few hours...
IE can handle some transparency but not all. I've noted that only 8-bit PNGs work sufficiently. More info here.
i use .png all the time, especially for logos, they are small in size and still kepp there quality and ive never had problems with them.
You can get IE to handle an alpha channeled png with a css behavior - http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html It really opens up your options, but puts a little bit of extra weight on your pages. Mozilla browsers support alpha channels without any changes. IE6 I believe started supporting png's, but I don't believe older IE versions support them.
ive had the exact opposite reaction with .png's. while they are of the best quality, it does show up in the size of the image. They tend to be easily double/triple the size of the gif/jpeg alt versionof the same image. I have found that i keep my .pngs only around if i want to end up changing something on an image. I then export it to a GIF if it needs to be transparent and a JPEG if otherwise. My preference leans to the JPEG format - it seems to keep its quality better with a small image size. my web pages tend to be on the large side, so anywhere i can save some size i need to.
There are compression utilities out there for png's, but none of the major software - photoshop, fireworks, corel, etc. seem to have that option built in. There are a series of utilities listed here: http://www.libpng.org/pub/png/pngapcv.html
In response to the original question, as others have said, PNGs can be viewed by any browser. The only limitation is in PNGs that have transparent parts in them, will not be displayed properly in Internet Explorer. However, there is a fix for this via CSS and I have a nice little piece of javascript that checks for the browser type and does the necessary fix on the graphics when someone is using a version of IE that would not display the graphics properly. put this in the <head> portion of your html files: <!--[if gte IE 5.5000]> <script type="text/javascript" src="pngfix.js"></script> <![endif]--> Code (markup): the javascript is below: // Correctly handle PNG transparency in Win IE 5.5 or higher. // http://homepage.ntlworld.com/bobosola. Updated 02-March-2004 function correctPNG() { 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 } } } window.attachEvent("onload", correctPNG); Code (markup): As for file size, generalizing about PNG, GIF and JPG will often just create arguments. It is most important to use the proper format for the job. A logo that may only have 2 or 4 colors, would be significantly smaller as a GIF or 8-bit PNG, and larger as a JPG or 24-bit PNG because there is more overhead in the file type than necessary to save the data in the file. Consequently, in a photograph using JPGs full range of 16.7 million possible colors will result in a better quality image than GIF (limited to only 256 colors) and may even be a smaller file size as well. As preference, 24-bit PNGs seem to be a great replacement for any place I would normally use a GIF file.
PNG is supportable in every browser. If you've got transparency, PNG works well in Firefox but in IE it goes screwy and the background is not transparent. However transparency in GIF works good on both browsers so if you have transparency in the template, consider changing it to gifs.
This thread is super old, but just as a side note, IE 6 displays PNG's correctly except for some color errors (think of the difference between CMYK and RGB). A site full of PNG's is fine. But when you mix PNGs with GIFs or JPGs you risk having the colors look wierd and not match.