The PNG color problem

Post here if your message doesn't fit into another forum but is still about web development. Includes site critiques, web hosting and server questions, helpful software and resources, and more.
Post Reply
User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3416
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

The PNG color problem

Post by Albert Wiersch » Mon Sep 03, 2012 11:55 am

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.
Image
Albert Wiersch

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 709
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by MikeGale » Mon Sep 03, 2012 5:54 pm

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
Site Admin
Posts: 3416
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: The PNG color problem

Post by Albert Wiersch » Tue Sep 04, 2012 7:53 am

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
Image
Albert Wiersch

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 709
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by MikeGale » Tue Sep 04, 2012 6:59 pm

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
Rank VI - Professional
Posts: 600
Joined: Mon Jun 09, 2008 2:12 pm
Location: Fargo, ND
Contact:

Re: The PNG color problem

Post by RSteinwand » Wed Apr 03, 2013 2:15 pm

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
Rank 0 - Newcomer
Posts: 1
Joined: Thu Jul 11, 2013 11:57 am

Re: The PNG color problem

Post by cacamoto » Thu Jul 11, 2013 12:03 pm

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
Rank VI - Professional
Posts: 709
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by MikeGale » Thu Jan 09, 2014 12:18 am

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
Site Admin
Posts: 3416
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: The PNG color problem

Post by Albert Wiersch » Thu Jan 09, 2014 6:51 am

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)?
Image
Albert Wiersch

User avatar
MikeGale
Rank VI - Professional
Rank VI - Professional
Posts: 709
Joined: Mon Dec 13, 2004 1:50 pm
Location: Tannhauser Gate

Re: The PNG color problem

Post by MikeGale » Thu Jan 09, 2014 4:49 pm

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
Site Admin
Posts: 3416
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: The PNG color problem

Post by Albert Wiersch » Thu Jan 09, 2014 7:08 pm

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
Image
Albert Wiersch

Post Reply