PNG Image

[nighthawks]

Can I use PNG image for web ? What benefit of it?

[Nile]

Yes you can use a .png image format for the web. To find out the benefits:
http://www.atalasoft.com/PNG.aspx

[Twey]

It is certainly worth switching to PNGs for anything but animations, but a couple of things do bear mentioning which that page missed:The GIF patent has expired in most places, and is therefore no longer an issue; Gamma correction can have rather nasty effects for Web images, and you're probably best off disabling it in your images (in the GIMP, simply untick the 'save gamma levels' when exporting as PNG); IE<7 have issues with PNG transparency, and require a rather ugly and somewhat limited JScript workaround; and, to end on a positive note, PNGs usually have a much smaller filesize than their equivalent GIFs. :)

[kendra326]

I make almost all of my files (except for certain types:animations and what not) PNG's and I love it.

[Nile]

Ok, keep using it.

[Twey]

Ah, just to clarify: when I said
It is certainly worth switching to PNGs for anything but animationsI was referring to usages in which GIFs are common. JPEGs have a separate niche, and are still the format of choice for distribution of images with a lot of colour detail, like photographs.

[saynogo9999]

PNG is awesome but in some of the old browsers the tranparent parts will appear with a background color instead.. I don't lnow this but i think it's PNG-24 only??

[Twey]

IE<7 have issues with PNG transparency, and require a rather ugly and somewhat limited JScript workaround;Yes, PNG-24 is the variant with transparency.

[jscheuer1]

All PNG versions I'm aware of have transparency available, even if it is only single layer transparency as is available in GIF. It's the version(s) with alpha channel transparency (a method well suited to gradient opacity) that isn't supported in IE < 7, except via the alpha image loader filter (IE 5.5 and up only), and even then it works out quite differently than a normal image tag or background image would. As a result many folks resort to a script to handle the 'heavy lifting' of getting it to look like a regular image tag or background image. But the tags may be written out 'by hand' if one knows how. Regardless of how it's done though, the filter itself still requires javascript and 'safe' Active X enabled.

If your PNG image may be rendered adequately with 256 colors or less and only single layer transparency or no transparency, no filter is required in any browser, as long as you save it in the more limited GIF like PNG format that supports only 256 colors. Why do so? Why not just save as GIF? Because PNG can sometimes result in an image that requires less bytes than GIF.

[Lockerbie]

Like many others, I tried a lot of different "transparent-png-scripts", but none of them worked just the way I wanted it. And then... I came upon this article about PNG8 (http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/)-transparency. Works great, and NO script needed! (Although you do need Fireworks...)

[Twey]

John's right: sorry I took so long to reply, it's a nightmare to find information on this, and the standard is exceptionally unreadable.

PNG-8 is interesting for the old IEs, but I don't see much point these days. Images should, of course, not be vital for accessibility anyway, since some people can't use them at all, so all using PNG-8 will do is add a very thin layer of fallback between two existing ones, at the cost of limiting image quality.

[techno_race]

Usually, if it has tansparency and/or fore than 256 colors, I'll use PNG. Otherwise, I use GIF. (GIF's transparecy is 0/100, while PNG's is 0-100.)

[Twey]

Well, that's (one of) the point(s). In all the situations where GIF seems appropriate, barring animation, you should be using PNG: it compresses far better, if nothing else.

[jscheuer1]

Well, that's (one of) the point(s). In all the situations where GIF seems appropriate, barring animation, you should be using PNG: it compresses far better, if nothing else.

Not always, but yes usually. With extremely simple and small things, .gif can still be better.

[Twey]

Oh, you seem to be right. It would be interesting to see exactly where they broke even. I'm guessing that the PNG is larger because of the extra meta-data?

[jscheuer1]

Well, I was thinking. You can use a utility like pngcrush to strip out all or most of the non-essential chunks. At that point .png might be better or the same. But the extra effort (unless pngcrush code could be implemented into your default image editor) makes it pointless.

I do use pngcrush though for png images that are already smaller than the .gif - to get them even smaller, and sometimes to correct (remove) the gamma chunk for IE.

[Twey]

The GIMP's compression routine includes features equivalent to (at least the non-destructive of) pngcrush, and allows one to decline to save gamma information when making a PNG image. I used the GIMP and found that a solid white 4px×4px image as a GIF was roughly ⅓ the size of the equivalent PNG: 36 bytes compared to 98. Perhaps pngcrush can get it smaller, but I would be fairly surprised.

[jscheuer1]

I may try your 4 x 4 solid white idea in pngcrush. It has a switch setting:


pngcrush -rem alla

That takes away everything possible. I think it would ruin complex images, but with a simple image like we are talking about, it would be fine.

I seem to remember doing similar trials at one point though, and .gif was still smaller.

[jscheuer1]

I got 37 bytes .gif, 83 bytes .png on my 4x4 solid white image. Using pngcrush provided no further optimization over my image editors (Paint Shop and Optimizer Pro).

[Twey]

I guess that's proven then. Not that sixty bytes are worth bothering with. It would be interesting if proportional differences were seen with larger and more complicated images... I wonder where the boundary is exactly?

[jscheuer1]

I'd think the cutoff would be subtle. I first discovered this phenomenon while working with small simple gif/png images. But they weren't as small or as simple as the 4 x 4 white we just tested. Dimensions, number of colors, dithering, and complexity of the image itself would all be factors I imagine, though it may be more simplistic than that. I'm thinking it is the interplay among these and possibly other factors that makes the difference. With slightly larger, slightly more complex images, I believe the savings with .gif is greater.

And yes, the 60 or so bytes is no big deal, but as the number of images of this sort involved on a page increases, and if they are slightly larger (engendering greater savings per image) . . . especially for slower connections, it could be important.