The PNG color problem

[Albert Wiersch]

Mike Gale found this great link on PNG's and color issues. I've noticed color discrepancies myself, mainly by noticing that the color of some PNG images was showing differently in different browsers and also potentially differing against the same image saved as GIFs and JPGs.

The Sad Story of PNG Gamma “Correction”

There is no way of making PNG images that match CSS colors in all PNG-supporting browsers. This reduces the usefulness of the otherwise excellent image format. If the image colors and the colors defined in a style sheet need to match, it is safer to use GIF or JPEG. If you want to use PNG and don’t care about older browser versions (pre-Tiger Safari in particular), the best course of action is removing all the color space information from the PNG files. If you only want a match with the background color, you could make the background a PNG image as well.

[MikeGale]

If anybody reading this has the time and inclination it would be valuable to a lot of people to establish a PNG version 2 standard.

It makes sense that somebody is doing this already, so if you know of such a project let us know.

I've not the time myself but some considerations of the top of my head would be:

• Matches what CSS, GIF and JPEG do (as an option)
• Compatible with existing PNG as far as possible (with easy UI guidance for graphics editor writers, to allow image makers to choose)
• Not encumbered by patents
• How to achieve acceptance by browser writers...

[Albert Wiersch]

I tried pngcrush as mentioned/recommended in the article:

Code: Select all

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

I didn't notice a difference with the images saved with Adobe Photoshop Element's "Save for the Web" feature, though I didn't look all that closely.

One thing that was interesting is that even using the "-brute" option to test more than 100 different compression settings to see which one is the best for the particular image, the image size was only reduced by about 1% (one image up to 1.3%), so it seems like Adobe Photoshop Element's "Save for the Web" feature (version 10) does a decent job at saving well-compressed PNG's.

In case anyone is interested, here is more information on pngcrush:
http://en.wikipedia.org/wiki/Pngcrush

[MikeGale]

Thanks for that. I hadn't checked PNGCRUSH yet.

Another thing that can be useful. Save the same image as PNG, GIF and JPG. Look at them and decide what to do. (You might need to use use several JPG's.) I'm still sometimes surprised when I do this. It can find a best format that I didn't expect! (It would be easy to add some pngcrush variants to the list!)