PNG usage? Is it safe yet...?

building a site selling image compression tools...

[Harley_m]

Would the use of PNG's yet be considered a viable option in webmaster terms?

I am currently building a monsterously cool e-commerce site selling some awesome digital image compression and distribution tools - and therefore i doubt that anyone will be running on knackered old machines - but macs of course are going to be common visitors...

whats the general opinion - we have a complex and gorgeous top graphic - which simply doesnt get close to being possible in gif, and jpeg does it normal trick of looking drab and bitty at any space saving sizes...

Thanks for your opinions!

Harley

[choster]

Basic PNG display has been supported since 4G browsers.

Two factors have worked against PNG's popularity, however. First, browser support for its advanced features is lacking-- gamma correction and alpha transparency most sorely. Second, Photoshop/ImageReady (and maybe other software) had poor optimization algorithsm for PNG, causing them to render images with insignificant compression advantages over the equivalent GIF or JPEG.

If you don't have to worry about alpha transparency or gamma correction and your resulting file size/quality is an improvement over GIF or JPEG, don't feel restrained from using PNG.

[isitreal]

I've been using png's for years, they work great, the only thing that didn't work with ns4 was the transparency, but ns4 just put in a white background. Personally, I've not understood why people still use gifs, they are bigger, have much worse image quality, are less clear, really no advantages at all that I can think of.

For all practical purposes anything you would have used a gif for would be better as a png. I don't know about the advanced png support, but as a straight replacement for a gif it's superior hands down.

[Wertigon]

For all practical purposes anything you would have used a gif for would be better as a png. I don't know about the advanced png support, but as a straight replacement for a gif it's superior hands down.

Well, yeah... Except for two things, the first is that transparent (binary) PNG backgrounds doesn't work with IE, not even binary transparency. The second is that PNG is only for still images, not animation, so if you want to make an animated banner, GIF has by far the most widespread support.

Wish there was more widespread support for MNG as well... =/

Otherwise I agree with the rest of the crowd; PNGs are simply great to use for webpages. :)

[edited by: Wertigon at 11:31 am (utc) on Feb. 21, 2004]

[Wertigon]

*edit* Argh! Double post! >_<

[asquithea]

Well, yeah... Except for two things, the first is that transparent (binary) PNG backgrounds doesn't work with IE, not even binary transparency.

This isn't true. All the major browsers support GIF-like transparancy with PNG -- it's just partial alpha that IE doesn't support.

Depending on your graphics application, you will probably find that PNG images are not significantly smaller in size than your GIF images. This is easily corrected by a dedicated compression utility, such as OptiPNG, which can run through your PNG images and make them much smaller with no loss of quality. IrfanView also does a good job of compression, and can batch convert GIFs to PNG quite quickly.

Support for MNG is verging on the non-existent, so you will need to use GIF for that -- but I'd think twice about using animated graphics on your site. The most common application of animated GIFs seems to be to irritate the customers!

[Farix]

I use a triple combination of pngrewrite, pngout and pngcrush. I actually have things set up to where I get a plain pngcrush, a pngrewrite+pngcrush result, pngrewrite+pngout+pngcrush result and pngout+pngcrush. I have yet to find anything else that yields better results. Most of the time, one of the last two is the smallest. But every so often, one of the first two images becomes the smallest usable file.

There is also one other case were GIF is better then PNG, and that is very small images with no more then 3-bits of color. In these cases, GIF is usually smaller.

[isitreal]

I forgot about animated gifs, for the reason above, they are too annoying to use, they should be left with the <blink> tag as a cute idea that might look good on a teenage girl's homepage.

Png's support transparency fine, at least the full transparency, the kind gifs use, so except for animated gifs, I stand corrected, if you are going to use a gif, then you are always, in all cases, better off using a png, I assume the 3 bit image thing is true, so with that one exception.

Png's are so superior for line art it's not even funny, try scanning a black and white comic sometime, then compresss it with gif and png, the png file is smaller and sharper, same with text, png seems to have a much superior text rendering algorythm than gif.

[grahamstewart]

I can't understand why png should be any 'sharper' than gif.
Surely both compressions are lossless so they should look identical?

Still.. wouldn't it be nice if IE supported proper PNG alpha transparencies (like all the other browsers do). We could do all kinds of nice semi-transparent menus and blended images.

There is an article at AListApart about getting them to work in IE but it seems like a lot of hassle. Anyone actually used it on a commercial site?

[isitreal]

Try generating a compressed version of a complex piece of black and white line art using png and gif, starting with a very high resolution original, the difference is astounding, at least it is to me, and the file is smaller. I've done that a lot, don't know about file sizes for simple color blocks and things like that, I assume the difference would be less noticeable.

GrahamStewart: no, gif and png8 are not lossless compressions, they are total losses, so to speak, at least as I understand it. You can't recover the original from the gif or png8, it's compressed away, that's what makes the file sizes so small. The only lossless compression format I know of used on the web is .shn , a compressed audio format that is actually lossless.

Opacity would be fantastic, obviously, I fake it by creating small graphics with every other pixel knocked out, that creates the illusion of opacity, kind of cool, but of course grainy, and very time consuming to generate.

IE does support opacity in general though for colors, that seems to work fine, proprietary tag, like moz-opacity or whatever it is, but it works.

[TryAgain]

Try generating a compressed version of a complex piece of black and white line art using png and gif

What software do you use? OptiPNG was mentioned, that the recommendation?

[isitreal]

I use fireworks 4, although I might look into some of the suggestions here too and see if the results are better, worse, or about the same.

[zair]

I've tried using the IE workaround for variable alpha channel transparancy, and it seems to work just fine. It's actually not that much of a hassle, if you copy and paste... I think it's pretty stupid that IE doesn't support it.

Anyway, here's a link. I'd send an example of how it looks, too, but all I did were a couple test pages. Try it yourselves, it works fine! :)

[howtocreate.co.uk...]

[isitreal]

Great link, thanks

[R1chard]

Yep, PNG is my prefered format and I use it whenever possible (ie everything except photos). Browser support is universal on all platforms.

I find that when I create them with MS PhotoEditor, they are 25-30% smaller than gifs...

[hyperbole]

Isitreal: I believe you are wrong about the compression of gif and png. They are both lossless.

jpg uses a lossy compression format.

[asquithea]

GIF is only lossless if the original image contains no more than 256 colours. PNG-24 (universally supported) supports full colour images without the lossiness of JPEGS.

When is this useful? Whenever full-colour line art is involved -- web-comics being the obvious example. JPEG will still produce better compression for photographs, but at the expense of artifacts around any sharp edges.

As always, select the best format for the job, but (with the exception of animation) there are few web-oriented images for which GIF is a better choice.

[grahamstewart]

gif and png8 are not lossless compression

They are definitely both lossless.

"Gif format, unlike Jpeg format, use a lossless compression algorithm."
- http://www.image-formats.com/gif.htm

"PNG's compression is fully lossless"
- http://www.libpng.org/pub/png/pngintro.html

The only difference is that GIF only has a 256 color palette so it loses some colour information from hi-colour images. But for comic art you are describing this shouldn't be an issue.

What I don't understand is why IE doesn't support PNG alpha transparency. There are open source library implementations out there (such as libpng) so it wouldn't take any real work on their behalf.

And it has been an issue for a looong time now.

[isitreal]

GrahamStewart: yes, of course you're right, it's been too long since I've read the specs, I'm sorry about that, I'll have to be more careful about making statements like that in the future without double checking them, thanks for the correction.

I was mixing it up with another effect, that happens when you shrink the original size.

[tedster]

Shoot, IE doesn't even support progressive jpeg properly - it downloads the whole file first, and only then renders it, all at once. PNG alpha transparency was much more 'esoteric' at the time IE6 was coded so I've never been surprised there.

[zair]

I've tried using photoshop to create pngs and, as others have mentioned, the size is less than satisfactory. Anybody have any recommendations for good programs to use (preferably free or at least fairly cheap)?

Thanks.
-Tobyn

[tolachi]

pngcrush is a beast. It makes files tiny. You can download it here:

[pmt.sourceforge.net...]

Obviously it is important to be careful about what color mode you are in and how many colors are in your pallete.

Fairix also seemed to have a good methodology, which I will quote since people seem to be missing it:

I use a triple combination of pngrewrite, pngout and pngcrush. I actually have things set up to where I get a plain pngcrush, a pngrewrite+pngcrush result, pngrewrite+pngout+pngcrush result and pngout+pngcrush. I have yet to find anything else that yields better results. Most of the time, one of the last two is the smallest. But every so often, one of the first two images becomes the smallest usable file.

[zair]

Hey, works great! thanks!