April 16, 2007

PNG color mismatch on the web: an easy fix

To clarify, this is an easy fix if you have saved your png files from Photoshop and, of course, still have access to the software. I stumbled across this fix in PS and haven't tested in any other applications. Feel free to point out other ones that work in a similar fashion. Note: I was using CS2.

The problem with colors in a png image not matching with other images (such as jpg) or hex color values has been around a long time. It's bugged the hell out of me that I couldn't ever find a very convenient way to get around this issue because png is a superior format to gif. From my understanding, this happens because of gamma correction data that is embedded in the file's meta data. Some browsers will read it, others ignore it. As a result, the actual color of the image can be slightly different than actual color values outside of a color calibrated environment. It's not terribly noticeable most of the time, but if you're working with tiled images it tends to stand out. I've done plenty of digging around (maybe not enough) and the only solutions I ever came across were using 3rd party applications that can read and modify the meta data of a png file, and strip it of the gamma correction information.

Two of the apps I came across that appeared most promising were TweakPNG and PNGCRUSH. TweakPNG is a Windows app, and being that I'm on a Mac this wasn't terribly convenient. While I can certainly boot into Windows or use Parallels to run the app, it's just not worth the trouble. PNGCRUSH is a command line app for DOS or Unix/Linux. Also more effort than it's worth for me.

While working on a site today, I decided to try and work with this problem more to see if anything would come of it. I went ahead and made all the imagery (save for a couple photos in jpg format) png. I thought I could pull it off, but I still had a couple spots where I was using a background color in my stylesheet so it didn't match up with the png images. I remembered the methodology behind the two previously mentioned applications and I started browsing around the menus in PS to see if I could get at any of the embedded data. Turns out, it's completely possible and I'm an idiot for not thinking about it earlier. I suppose it's probably not some hidden menu that no one knew about but I certainly never saw it brought up in any discussions about the png color mismatch dilemma.

After you've saved your file in png format (preferably through the save for web feature), close it and reopen it (so to make sure it's reading the embedded data that was saved with the file). Go to the file menu, then file info. You'll see a window with a list of categories on the left. Go to the Advanced category. Your window should look something like this. Delete the Adobe Photoshop Properties item and the item that just says http://ns.adobe.com/png/1.0/. Click ok, then save your file. The data in the file causing the color shift will now be gone and your images will match up with other image formats and hex color values correctly. It's important to know that if you reopen the file in PS and do any sort of modification (allowing it to be saved again) then it may reapply the embedded data. One additional thing be aware of is that you can put these steps into an action to be reused at any time. It does seem to keep track of how the file info is modified when recording the action.

This fix is kind of stupidly simple, but I was never able to find anyone who used the same method. As a result, I'm writing about it here. If I just completely suck at harnessing the power of Google and it turns out this information is widespread and others have blogged about it, then feel free to ridicule me. Hopefully this helps some folks out anyway.

UPDATE: After some discussion with Jesse, he pointed out that Safari was still forcing a slight color shift (though much less significant than prior to the data stripping). I managed to fix this, at least for myself, by in Photoshop going to the edit menu, then Assign Profile. I assigned a file my working space color profile along with stripping the data out and this seems to make it display correctly in Safari with no color shift. I'm currently unaware if this only repairs it for someone with the same color profile or not but I'll continue testing. However, it does seem that Internet Explorer 6 continues to color shift. All other browsers/platforms I've tested work.

Comments

Any reason you can think of as to why I wouldn't have http://ns.adobe.com/png/1.0/? I have the Adobe Photoshop Properties item, but not the png/1.0/ link. And when I just delete the Photoshop Properties, I can still see a color shift in IE 7.

Thanks for the great info, regardless :D

Posted by: Shad | April 19, 2007 6:43 AM

Thanks for the tip.

We've been using a photoshop plug-in called SuperPNG that will strip the meta information out of the file.

http://www.fnordware.com/superpng/

It does a pretty good job.

Posted by: Eric Skogen | April 19, 2007 7:30 AM

Shad: Not sure why you wouldn't have that item but I think the most important item is the Photoshop Properties. I guess all forms of IE aren't playing very nice. If the method can work in all other browsers though it might be worth it to use a javascript image swap for IE. I would say it depends on the project. The site I used this on had light colors and no color shift is visible in IE, but darker colors do seem to show it more easily.

Eric: Thanks, I'll definitely check it out. If it works for me I'll post a followup with credit given.

Posted by: polarbearlamps | April 19, 2007 8:29 AM

There's an apple script that can be used along with pngCrush. after enabling the script menu, its very easy to do it. just select the png file in finder and select the script from the script menu. it even automatically makes a back-up of the original.

http://xdeb.org/wiki/AppleScript/PNGGammaFix

Posted by: Alex | April 19, 2007 5:58 PM

After some searching I did find a couple wrappers for PNG strippers such as PNGCrusher but they didn't do very well with removing gamma data and often the file would look the same or worse.

Posted by: polarbearlamps | April 19, 2007 6:17 PM

Out of frustration, I purchased PNGOUTWin, which does a great job right out of the box. Not useful for Mac owners, but the maker, Ardfry (www.ardfry.com) also makes a plugin for Photoshop (Win and Mac versions).

Might be worth looking at. The 15-day free trial should let you know.

Cordially, David.

Posted by: David Hucklesby | April 19, 2007 7:50 PM

I made a GUI for PNGOut (I like it more than PNGCrush), as well sa Dojo Shrinksafe and CSSTidy.

You can use it to compress an entire web app to a destination directory (or overwrite).

http://www.sachmanbhatti.com/software/sbWebOptimizer/

Posted by: Sachman Bhatti | April 20, 2007 3:34 PM

Thanks Torben. I've been messing around with some of the other solutions posted here without much success. I actually started working on an app to do the exact thing GammaSlamma does but now I don't need to. It works perfectly.

So my original fix was only partially viable but I'm glad it led to this discussion.

Posted by: polarbearlamps | April 21, 2007 9:43 AM

http://hsivonen.iki.fi/png-gamma-test-results/

Going with unlabeled PNGs (no gamma metadata) is not quite perfect, but the best option. It works fine with the newest versions of all the browsers, the only problematic one of note is Safari

Posted by: Anson | April 26, 2007 10:59 AM

This article saved me from going completely A-Wall - incidentally, the article although enlightening didn't solve my color mismatch problem, but Eric Skogen's link to SuperPNG did. Kick. Ass.

I had a transparent PNG that tiled vertically as a shadow down a page; the middle color - that acted as the background for text - was grey (#232323), but Safari, IE7, IE6 all translated it as black.

I put SuperPNG on my PS (CS2 version) - worked like a bloody charm. Only key was I couldn't save as Web, just "Save As", but the file size was still small - only 6KB.

So THANK YOU to everyone involved.
-gels

Posted by: gels | June 21, 2007 9:15 AM

Yeah. It (SuperPNG) seems to not work for Save for Web at all, which is quite a disappointment.

Otherwise, it's a great solution!

Posted by: AndrewVos | June 24, 2007 1:00 PM

Photoshop CS3 or Fireworks does not have this problem.

Posted by: Ashung | June 25, 2007 1:15 AM

I have this problem even with jpeg, so I switch off colour management that was meant for prints (edit > colour settings > colour management off)

Colour management sucks. I find that it not only mess up web graphics, it also mess up printout unless you have a correct printer profile, else it's better not to have any profile at all than to have profile that push colours to the extremes.

Adobe should remove this gamma information when we "save for web" anyway. Now they are going to have colour profile for jpeg soon. We will have more headache soon as well.

Posted by: boonhong | July 3, 2007 1:49 AM

Thanks so much for this info!! I think it's going to totally save me!

I'm a mac user, and like Shad, I didn't find the png line in the photoshop (CS) file info, but removing the photoshop properties was a 90% improvement already. I then tried GammaSlamma, which seemed to give even slightly better results.

So far, I've only been able to test these files in Preview, so I can't report any specific browser info.

Thanks again!

Posted by: nijocamus | July 15, 2007 2:22 PM

Saving PNGs from Fireworks gets rid of the unwanted Gamma data. I haven't tested with IE7 or Safari though.
SuperPNG created unnecessarily large file sizes.
Shaun Inman shed this pearl for me:
http://circa1977.com/2006/08/20/not-safe-for-web/

Posted by: Richard Sime | July 16, 2007 4:38 PM

PngOptimizer for Windows is a great tool for easily removing the metadata. It is a simple drag'n'drop application you can open while you're working, then drop files on it to optimize. End results work perfectly in all browsers and the files can become much smaller.

http://psydk.org/PngOptimizer.php is the link.

Sources are available so one should be able to make versions for Mac OS X and Linux.

Posted by: Merri | July 17, 2007 2:49 PM

WOW, PNGOUTWin saved my day honestly. I had the color shift problem as well with IE 7 (maddening 2 hours to say the least), and BAM, the problem went away. Going to test IE6 and safari next, but I assume those will be ok.

Posted by: Marc Miles | September 1, 2007 5:27 PM

The original fix (deleting information from the PNG file) does not work for me. I click OK, save, and then look at the file info and the modules I had previously deleted have returned. When I save, Photoshop is just putting them back in again. How am I supposed to fix this?

Posted by: Rhys Andrews | September 21, 2007 6:58 AM

Thanks to everyone who has posted here! You have fixed an age old issue for me.

GammaSlamma 1.1 is now my weapon of choice for PS CS2 on my Mac, but the manual method from this original post also worked for me.

Posted by: daynw | October 19, 2007 1:24 PM

Thanks Merri - PngOptimizer (for windows) is absolutely fantastic. Had been scrabbling around with a more complex fix, but this tiny free app is just marvellous. Solved all my colour shift problems and reduced by file sizes by over %50. Adobe - you need to do something about this, "Save for Web" should be just that!

http://psydk.org/PngOptimizer.php

Posted by: Richard Gps | November 9, 2007 4:03 AM

PngOptimizer seems to work liek a charm on windows.

Thanks for the great article.

Posted by: Eftimie Andrei | November 28, 2007 7:39 AM

Most interesting topic, it seems that i'm not the only one with this problem.Thanks for the usefull tips.

Posted by: edwin | January 8, 2008 2:23 AM

Thanks for the tips :) I am now using GammaSlamma, thanks to the comment by Torben. Previously I was using PNGOut in Windows (which was inconvenient as I work on a Mac platform).

For those that are neglecting to test the effectiveness of any of these methods in IE or Safari, you should be aware that these are the worst offending browsers for shifting colour:

http://morris-photographics.com/photoshop/articles/png-gamma.html

Posted by: iain | January 31, 2008 4:23 PM

Yeah, PngOptimizer is great! I've used PNGs with alpha transparency (drop shadow) and this tool solves it out for IE7.

And if you are going to use 24bit PNG files for website, try this solution:
http://www.twinhelix.com/css/iepngfix/
It brings full usability of PNG for IE5.5 and IE6 thru the .htc script.

Posted by: IdeFixx | February 8, 2008 11:32 AM