The PNG color problem

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

The PNG color problem

Post by 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.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by 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...
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: The PNG color problem

Post by 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
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by 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!)
User avatar
RSteinwand
Rank VI - Professional
Posts: 596
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND

Re: The PNG color problem

Post by RSteinwand »

I know, old thread. :D

I use Paint.Net for image editing and always save my PNG's with the "Optimized PNG" plugin. For the most part it works nicely, but I still like to glean that extra few bytes by uploading to Smush.it.

I have seen where certain colors were off in Firefox until I Smushed the image.
Rick
cacamoto
Rank 0 - Newcomer
Posts: 1
Joined: Thu Jul 11, 2013 11:57 am

Re: The PNG color problem

Post by cacamoto »

I read the sad story, however no matter what program I use I always end up getting a better compression ratio with gif.

Besides I have grown accustomed to GIF especially since I discovered the correct pronunciation is actually "JIF" :lol:
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by MikeGale »

I was reminded of this thread while using jpegtran.

It's a tool that can strip exif data out of jpegs (and do other things). Very useful.

On something I did yesterday it turned a 41K jpeg into 30 K, with no change in quality. That surprised me.

Worth using.

It also sparked a thought. The validator could optionally check aspects of image files, by interrogating the files, and give messages if needed.
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: The PNG color problem

Post by Albert Wiersch »

Thanks Mike. That's an interesting suggestion for a future version, especially if there was an easy way to get information about the jpeg with jpegtran.

Do you mostly check sites using HTTP? Or do you mostly check local html & css files (using file paths and no HTTP)?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
User avatar
MikeGale
Rank VI - Professional
Posts: 726
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by MikeGale »

There's a file called jpg9exe.zip from "Independent JPEG Group" which contains tran and other things. Looks like it's as live as it needs to be, last release a year ago. I haven't evaluated it for this idea, but think it's all doable from that.

On where I validate from, the easy answer is both. (The more complex answer is it goes through phases, sometimes mostly local sometimes not. The most important image validation is probably done locally!)
User avatar
Albert Wiersch
Site Admin
Posts: 3785
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX

Re: The PNG color problem

Post by Albert Wiersch »

Thanks Mike. I may look into this for v15 later this year (given the time) and see if it's not too difficult to implement & integrate some type of local image checking using that tool or some other freely available command line image processing/analysis tool. :D
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial