nostin
web development
Safari showing a different image colour
23rd Jun 2009 11:48am
I came across an interesting problem last night, in which Safari was rendering an image with slightly different colours than was being rendered in IE and Firefox.
I was setting up a new wordpress blog with which I intend to document my upcoming travels in Europe for family and friends back home. The problem was that the theme I wanted had a header image with a background colour that was supposed to be the same as the CSS background colour behind it.
This was being rendered as intended in Firefox, but not in Safari. The difference is as shown (the different text rendering is another issue altogether):
You can see the image grey in Safari is darker. What is even more interesting is that when I opened the image in photoshop and eye dropped the grey from the background of the image, it gave me the same colour as what was specified in the stylesheet!
So why was it showing up differently in the browser? And why only Safari? A “Get Info” (mac user here) on the file itself presented what the problem really was:
The image had been exported with a colour profile. Safari is smart enough to pick this up and render it whereas the other browsers apparently are not.
The fix is simply to re-export the image and save for web. A good web developer will ‘save for web’ his or her images regardless, however if you come across this problem somehow, first step is to try exporting your web images properly.
Doing a “Get Info”, or file properties on Windows (I guess) should not show any colour profiling if the image is clean:
Comments (0)
+ –