Safari displaying wrong colors?

[Mike Teezie]

I made a little space to put a few pictures I made with my new camera.

I made some buttons and a little banner in Photoshop. I selected a grey color to use for the background, #767676.

I made that color the background in the body of my css.

For some reason, Safari is displaying the grey color of the jpgs darker than they should be. IE and Firefox display them fine.

IE:
http://apsnap.com/mnj/images/ie.png

Firefox:
http://apsnap.com/mnj/images/firefox.png

Safari
http://apsnap.com/mnj/images/safari.png

Could a setting in Photoshop be wrong? Or is this a Safari issue?

:confused:

[Nermal]

I'm no expert, but wouldn't it make more sense to use a transparent background on the image files, rather than a solid colour?

[Mike Teezie]

Well, I could, but alpha support is shaky at best in IE, and I don't want to use .gifs.

Not to mention Safari shouldn't be displaying these colors improperly.

Any ideas?

[whocares]

I read an interesting article sometime back on color profile handling by browsers. Quite scare! Try Saving for Web and don't include the color profiles. This way Safari should match the #767676 in the image to the #767676 of the background. Seems to work for me :)

[mnkeybsness]

I've only seen this issue with PNGs, seeing the wrong color in all browsers except Safari (there is a good reason for this and it is mostly hardware side... Safari corrects the output before it gets to the graphics card). This is a new one for me, and I'm going to guess that you are saving color profiles inside of the image, which is likely to cause the problem.

If not, can you give us a link or example of where this is happening?

Also, there is nothing wrong with using GIFs for images that are simple like the image that you are showing above. GIFs are actually great for small and simple graphics like that (though I would prefer to use PNG if it were supported better).

[Mike Teezie]

Yeah, I normally use gifs for anything like this. I too, would prefer .pngs, if they were better supported.

I originally started the file as a .gif, but when I saw it in the save preview, it looked much lighter, so I thought, "hmm. I'll just use jpgs."

I went about making my page, and got the problem above. I tried saving without embedding a color profile, same thing. It was also wrong on a friend's iBook/Safari.

So, I spent about an hour last night switching the whole thing over to gifs - which corrected the problem.

[ChicoWeb]

Wow, never seen that before.

Save for web, and make sure when you are saving as a gif. Try bumping the qual to 256, or jpeg 100 to debug.

Thats my guess..never had that happen to me before..it is a gif right?

Just saw, you use png. That explains it, use a gif..

[ezkimo]

I have this problem too and it drives me completely out of my mind. SOOOOO irritating.

[kgarner]

I read an interesting article sometime back on color profile handling by browsers. Quite scare! Try Saving for Web and don't include the color profiles. This way Safari should match the #767676 in the image to the #767676 of the background. Seems to work for me :)
This is what is happening. I remember that article as well. Although I think that it dealt mostly with PNG files, the problems can extend to JPEGs too. Try his suggestion and see if that makes a difference.

[SummerBreeze]

The same thing was happening to me on my livejournal, it was driving me crazy. Thanks for figuring this one out.

[CanadaRAM]

I made a little space to put a few pictures I made with my new camera.

I made some buttons and a little banner in Photoshop. I selected a grey color to use for the background, #767676.

I made that color the background in the body of my css.

For some reason, Safari is displaying the grey color of the jpgs darker than they should be. IE and Firefox display them fine.

Could a setting in Photoshop be wrong? Or is this a Safari issue?

:confused:
An alternative would be to use a solid colour block JPG BG image rather than using a RGB BG colour -- that way the browser is rendering the same image type for the foreground as the BG.

And like kgarner says, never, ever include profiles with a web graphic.