dylan bathurst

Synopsis of Differences in Image Colors Between Browsers

I recently did a redesign of dylanbathurst.com. I used photoshop CS3 for all of the graphic use. Working primarily with firefox I noticed a distinct difference in colors when comparing my photoshop file to the actual image in the browser. At first I just chalked it up to color loss when saving the image as a jpg or png file format.

As I built out the new template, I would make sure to check firefox, ie6, and ie7 for compatibility. In all three browsers the colors weren’t as vibrant as I had created in PS. Even when using the colors with the “only web colors” option turned on. Again I just thought that there was some color loss in the saving process of the images. It was only after I checked in Safari and saw that the colors were beautiful, and just how I had originally created them that I wanted to find out why the other browsers didn’t display the correct colors.

Here are a few screen caps of the differences. Notice the differences in the oranges. I used the web only hexadecimal value #cc6600. The top orange part in each image is what is actually in the browser. The bottom orange part is the photoshop .psd file.

Firefox v. 2.0.0.11

ie6

Notice how ie and Firefox display the orange the same, but are very different from Safari.

Safari v. 3.0.4

After doing some searching around the main piece of information that I found out was browsers like firefox, ie6/7, and others do not support ICC profiles.

The purpose of the ICC is to promote the use and adoption of open, vendor-neutral, cross-platform color management systems.

Safari on the other hand does have support for profiles 4 and 2. Essentially this means better, deeper, more vibrant colors for the user. Although I have not had a go with Firefox 3 beta version yet there is tell that it will have better ICC standards support, and also that Microsoft is putting some time into the coming up with a solution to this problem.

If you would like to know whether or not your browser supports these “Profiles” there is a very simple test you should try.

We can only hope to see browsers lacking support for these color standards work hard to quickly start implementing the ICC’s Profile Version 4 so that people can get the exact (or as close as current technology will allow) color matches between their original creation and their site.