What do you do when your colors don’t look right in Safari?
January 18, 2009
I’ve been working very hard, which hasn’t left much time for blog posts. I’ve decided to start posting quick tips here — the solutions to problems I’ve run across in my work. Some of you are working designers, and these tricks may be helpful to you. Some of you are design aficionados, in which case these kinds of posts may not be interesting , but I’m working up a new feature for you, too, in the near feature.
Problem: You create a JPG image in Photoshop that has the same background color as you’ve specified for your web page. The goal is to make the image background blend into the page, so that the image is not boxed.
The page looks great in Firefox (and other browsers), but when you open Safari, the background colors don’t match. You double check — the hexadecimal codes are the same. What gives?
Solution: Check to see if your Photoshop JPG has saved a color profile with the file. Safari, unlike other browsers, will respect this setting and actually change the colors in your image to match your specifications. It’s pretty sophistiated of Safari, but it’s usually not what you want when you’re designing a web page. Save all of your Photoshop JPGs without an attached profile, and you should fix this problem.
ETA: Here are some example screenshots:
JPG image on color background in Firefox
JPG image on color background in Safari, saved with profile
JPG image on color background in Safari, saved WITHOUT profile
You can see these pages at http://www.leslietanedesign.com/example/ (with profile) and http://www.leslietanedesign.com/example/test2.html (without profile).
That’s odd, out of all the testing I do on the three major browsers I’ve never run into that (then again I tend to go for a minimal style). Out of curiosity, do you use a Mac or PC?
Comment by Jason T. — January 22, 2009 @ 3:37 pm
I use a Mac, Jason.
I’m going to post samples to the original blog post above.
Comment by Leslie Tane Design — January 22, 2009 @ 3:52 pm
Does this only impact JPGs or also PNGs?
Comment by Andrew — May 20, 2009 @ 9:44 am
Safari enhances images by default through a Webkit engine feature. I always consider that and instead of saving as JPG, I save as PNG.
The only less good thing is you can’t compress PNG’s as you compress JPG’s :S
Comment by José Mota — May 20, 2009 @ 9:46 am
> Safari, unlike other browsers
Actually, the functionality exists in Firefox; it just isn’t on by default. I have mine set up to respect color profiles. I realize I’m in the minority, though…
Comment by Hugh Guiney — May 20, 2009 @ 9:48 am
Love this detail — thanks.
I cheat by using Fireworks :P
Comment by Alan Bristow — May 20, 2009 @ 9:53 am
Check this write up about it:
http://news.cnet.com/Safari-ushers-in-better-browser-colors/2100-1012_3-6191815.html
Comment by Neil — May 20, 2009 @ 9:54 am
but if you are using “saving to web” shouldn’t/wouldn’t that solve the problem?
Comment by kim — May 20, 2009 @ 9:56 am
I noticed it’s when the colour profile is set to ’sRGB’
Comment by Justin — May 20, 2009 @ 9:56 am
@Andrew:
The PNG and GIF file formats don’t support embedded colour profiles, so no worries there.
Technically, designers should be using the sRGB colour profile in JPEG images for the web - this is a lowest-common-denominator colour space developed by HP and Microsoft to simulate the colour reproduction capabilities of consumer-level computer displays. If Safari sees a JPEG without a colour profile, it assumes sRGB, hence the effect described in this blog post.
Comment by John — May 20, 2009 @ 10:05 am
Images like that (large color blocks) shouldn’t be saved as .JPG in any case — this seems to be a solution without a (valid) problem.
Comment by Sara — May 20, 2009 @ 10:20 am
Thank you everyone for your comments. Hugh and John, thanks especially for adding in your knowledge. It’s appreciated.
Sara, you’re right - the type of image I used in the examples should be saved as a gif or a png, but I mocked them up quickly to provide an example. If you’d like to see a case where this came into play for me (actually the reason I had to figure this out in the first place) please check out http://www.fiberfarm.com. The images on the top that “break” the borders are a good example of this in real life.
Comment by Leslie Tane Design — May 20, 2009 @ 10:41 am
Am Reading this on a iPhone and all 3 images look identical. None of them look right.
Dave
Comment by dave Baxter — May 20, 2009 @ 12:19 pm
Interesting, Dave. I can’t think of why that should be since the images above are screengrabs saved with exactly the same settings. I’ll have to get my hands on an iphone and check it out.
Comment by Leslie Tane Design — May 20, 2009 @ 12:23 pm
Safari — unline other browsers — supports color Profile (ICC), that’s why you’re seeing this variation of colur…
Comment by u-wit — May 20, 2009 @ 3:09 pm