Why do images exported in Design have different colors in Firefox? RRS feed

  • Question

  • I noticed that when I compare images I have created, sliced, and exported with Expression Design and then viewed with IE8, Chrome, and Firefox 4 that Firefox is showing my images with a slightly different color.  Had I not been comparing browsers I probably would not have noticed the difference, but sure enough in Firefox the colors look a little dull.

    I spent some time searching the web for this and came up with very little.  The one thing I did learn is that FireFox uses color profiles.  So I did some digging into that, found a few answers on this forum about checking Color Management in Windows.  Sure enough I had a color profile set specific for my monitor.  When I removed that (or changed it to sRGB) and restarted, FireFox started showing the images with the correct colors.

    I'm not very familiar with ICC profiles, but I noticed that if I export my images to jpeg I have an option to include the ICC profile, but not with PNG (which my images were exported as).  If I export my images with my new sRGB profile set in Windows and then convert my Windows color Profile back to the custom one it had been using for my monitor I still see the dulled images in FireFox.

    So my question is, are these ICC profiles being included in PNG exports in Expression Design 4?  Is what I am seeing specific to my machine or will others that visit my website possibly experience the same thing in a color managed browser like FireFox?  Can someone explain to me how these ICC profiles are working in Expression Design in regards to PNG?  I'm a developer and don't normally get into the details of color so I'm at a bit of a loss here.  I'm trying to create a demo for my company on how we as developers can better use the tools provided in the Expression Suite and how they work together and would like to be able to explain this better if asked.

    Thursday, May 26, 2011 5:52 PM

All replies

  • I don't know. I'll look for an answer and get back to you. Sorry for the delay.

    Friday, May 27, 2011 5:31 PM
  • You are probably using so-called wide gamut  monitor.  It's  possible to show correct colors only in color managed applications on such a monitor.  So Firefox shows correct colors for jpegs based on their icc profiles and shows colors over-saturated for anything else, the same as in IE and other non color managed applications.  You can't do anything with this.
    Saturday, May 28, 2011 7:16 PM
  • I just run into a problem that may be related to your. I had a .png with a color matching my CSS background color, everything was fine in chrome, firefox, ie9, but older versions of IE were displaying for the .png a slightly different color. The issue was related to gamma correction, and thought I didn't find a way to correct this directly in Design, I found on another forum a suggestion to use this free tool http://entropymine.com/jason/tweakpng/ to remove gamma information from .png files. Without this information, also older IEs (6-8) will avoid any correction to the .png colors and the result is back as expected, identical to the CSS. The same tool allows you to change the rendering intent of the .png, default for Design seems to be "perceptual", you may try the other modes to see what fits best your graphic. This govern how the .png will be rendered on destinations with limited gamuts. 
    Tuesday, June 14, 2011 9:12 PM