What is the best color profile to use for a PNG file for CSS Sprites?

I am using a PNG file as CSS Sprites, and the color profile is making the PNG colors look different on Firefox and on Chrome (on a Macbook Pro)

What is the best color profile to use before saving this PhotoShop file (.psd) as a PNG file? (or best to remove it completely and how?)

Details:

This is the Edit -> Color Settings in PhotoShop CS5:

What should they be set to before saving the file as PNG? (or can change it when saving?)

Also, it is really strange that on Chrome, if I look at the file at

http://foobar:9000/images/sprites.png

or

http://localhost:3000/images/sprites.png

the color orange looks dark.

bu开发者_如何学Got if I view the same image on

http://foobar.mycompany.com:9000/images/sprites.png

or

http://hello.mycompany.com:8080/images/sprites.png (using ssh tunnel into my localhost)

now the color orange is bright. They point to the exact same file and even if I download them and do a diff, they are binary equal. Anybody knows why?

Update: Photoshop CC allows you to uncheck the "embed color profile" option to not embed a profile. It's strongly recommended that you do this unless you have a really good reason not to.

The short answer is, unfortunately, you're screwed with ANY color profile. Your best bet is to use none, but you can't actually get photoshop to save files like that. This topic has thousands of discussions and opinions, but deleting the color profile allows browsers to interpret the colors of pngs the same way as HTML Hex colors.

Personally, I strip all my color data using a custom script, but something like TweakPNG should allow you to do the same.

The short answer is you should not be using a color profile at all and ensuring "convert to sRGB" is turned off.

See this article for a better explanation on why and how to do this

Try setting your color management policies to Off. I'm not sure if that will help, but it might.

It's a tricky issue, as level of support for color profiles varies between browsers.

Using sRGB gamma 2.2 is a good start.

If you need CSS colors to match PNG colors, then you'll have to remove color profile and gamma information from the PNG, since most browsers don't color-manage CSS colors (or if they do, they process them the same way as unlabelled PNGs).

http://imageoptim.com/color-profiles.html

I don't think that there is an answer. Safari and Chrome assume that all images are saved in the sRGB color space.

Safari will take into account a different color profile embedded in the image, but Chrome will not.

Firefox does not take anything into account, and will just use the native RGB values.

This means that colors in Firefox on a wide-color (P3) screen like a Macbook pro will look extremely vivid compared to the sRGB colors displayed in Chrome and Safari.

Alternatively, you can apply the P3 profile to the images and they will display as vivid in Safari and Firefox, but washed-out in Chrome.

There is no one setting that applies to all browsers.