PNG is Nš1

but why we dont use it?

[bbbandit]

Hi

Im starting to put photos of produts in my website, but iam not sure if i put them in PNG format, (PNG is better) but every one use GIF/JPG. Some old browsers dont display them, but with time they are replaced.
Thanks for any comment

[topr8]

i was put off png's because the version of dreamweaver i use doesn't display them properly and i found it irritating.

otherwise png's are fine to use these days, all computer desktop browsers will show them, not sure about hand-helds and so on

[bbbandit]

"otherwise png's are fine to use these days, all computer desktop browsers will show them"

Why its difficult to see websites using PNG? Isn`t a normal procedure?

[Don_Hoagie]

I'm confused... why are you so confident that PNGs will eventually slay all other image formats if you don't even understand browser/app support for the format?

There are plenty of instances where a GIF or a JPEG would do just fine... and no one is getting rid of JPEGS anytime soon, for a multitude of reasons.

To answer the question you may or may not have even asked, people use GIF or JPEG formats instead of PNG because:

A)they don't know what a PNG is

B)they don't have, or don't know that they have software that can create PNGs

C) they don't need the transparency benefits

D)they worry about browser support. In the case of D, it is quickly becoming a non-issue, but the problem still remains, in the same way that there are only a handful of "safe" fonts to use on a webpage. You COULD use PNGs, and you COULD use "Univers" font-family in a webpage... but there will be PCs out there that still aren't on board. In the case of a GIF however, every PC that can access the internet was built with the ability to view GIF files, so it's one less thing to worry about when making your site accessible.

[Farix]

D is a non-issue since almost all browsers support most aspects of PNG. But there is also . . .

E) Refusal to use PNG until it is 100% supported in IE (which is pretty shooting yourself in the foot).

To say the lease, PNG is a nearly complete replacement of GIF except when it comes to animation, which PNG can't do. And PNG usually does those things efficiently. PNG was not intended to replace JPEG, which is more efficient in storing photorealistic images.

[stever]

Because pngs are almost always larger in file size? And what they show can normally be shown quicker by using gifs or jpgs.

[directrix]

In my experience, PNGs are usually smaller than GIFs, at least for line drawings. On the other hand, a PNG is often bigger than a JPG of equivalent quality.

About a year ago I used a great little utility, pngout, to convert all the GIFs on my site to PNGs. I was close to putting them live when my wife mentioned that twice recently, once at home and once at work, she'd been unable to view PNGs in IE6. Sure enough, if you google for, say, "Internet Explorer doesn't display PNG images", this is a well documented problem.

I don't need alpha transparency, but I do need visitors to be able to see the images on my site. So GIFs it is.

[Don_Hoagie]

"PNG is a nearly complete replacement of GIF except when it comes to animation, which PNG can't do"

Actually they've been working on animated Portable Network Graphics for a while now... I think it might be called MPNG? Don't remember. But the point is that PNGs could indeed render GIFs totally obsolete if they only the support was there.

[collymellon]

IE dosen't support PNG very well at all -

Allthough IE7 will fully support transparent PNG's..

[limbo]

PNGs could indeed render GIFs totally obsolete if they only the support was there

Ahh, and there in lies the problem... If only there was support for CSS3 too ;)

One thing worth mentioning - png maintains vector, layer and fonts data. Something a raster img like jpg of gif cannot. While I do not use png's for the graphics themselves (for the support reasons above) I found the to have certain offline advantages - particularly as source files using fireworks.

[surfin2u]

One nice thing about PNGs is that php code can generate them on the fly.

[travelin cat]

My main problem is that there is not 100% compliance yet.

Creating a site for a client with png's is like biz suicide...

When the client views it at a friends house to show them their shiny new $10,000 web site and the graphics don't load because the friend has a 5 year old computer running an old browser.

Love those phone calls.

png's are fine for non-commercial sites or perhaps your own site where you have nobody to answer to but yourself.

[surfin2u]

I agree and that's why I don't use them either. I get enough visitors with old browsers on my site to make me avoid doing anything too modern.

[datadesigner]

**THE** primary reason to use PNG instead of using GIF or JPG, is that it is superior in design to the other formats, and, get this, you can use PNG images the way you would want to use GIF or JPG. It would be really cool if there were transparent JPG files, but they haven't arrived yet.

I use PNG as much as I can get away with, primarily because it can be a transparent image with real shading. I've forgotten how its done at the c-code level in creating a PNG image, but PNG can be transparent and STILL contain dropped shadows or other shadings that transparent GIFs just cannot do.

Create a transparent PSD in Photoshop, add all the shading and dropped shadows. Then save-it-for-web as a PNG-8 or even better PNG-24. Save a GIF version for the web, and you'll instantly see what crap it looks like compared to your PNG. This means you can place a PNG on top of a colored background--a background that can be changed, without having to change the PNG.

You can get quite creative with layering ala z-index levels, and CSS, and start to creat images that can be placed in pieces with div tags instead of the old method of being forced to create images that can't be transparent or shaded. You can create little 1x1 PNG images that are a percentage of 100% opacity for great looking background colors and shades.

There is however one one small problem with transparent PNG...IE.

IE is literally too retarded to properly display transparent PNG, so you have to put a javascript in the page right before the BODY tag, and it will properly display the transparent PNG. It activates a little-know MS function called DXImageTransform.Microsoft.AlphaImageLoader that renders PNG correctly when using IE, and is exclusively for IE so other browsers ignore it. Of course if you don't make a transparent PNG you don't need the javascript.

</head>
<!--[if gte IE 5.5000]>
<script language="JavaScript">
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 
 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);
</script>
<![endif]-->
<BODY>

[/i]

Just place this piece of code at the beginning of your page, right after the HEAD section and voila, it fixes the problem. The only problem with it is that it is visible if your page loads slowly, and you're using the retarded IE browser. Other browsers such as Opera ( which is now FREE ) and FireFox ignore the script completely and your even-more-cool web page now has a way-cool image with all the stunning visual appeal you wanted in the first place. You'll see how crappy GIF is once you get with the PNG way. You can still use JPG when you don't need the transparency. Between JPG and PNG your web pages should be looking sharp!

-dd-

[tbear]

Think I'll stick to jpg and gifs, instead of using workarounds.........;)