To have the same colors in Photoshop and on the Web

[Doe Johns]

As far as I know (I'm not a pro), it seems there are two ways to achieve the same colors between the image you see in Photoshop and the same image after you save it for Web (File > Save for Web) and upload on a website.

The first way is to check "Embed Color Profile" and "Convert to sRGB" check boxes in the "Save for Web" window. Using the first way, you make the exported JPEG as bright as it is in Photoshop.

The second way is somewhat opposite. You need to click "View > Proof Setup", and then select "Internet Standard RGB" or maybe "Monitor RGB". (I'm not sure which one. This is one another thing I want to consult here about.) And then you also need to set a checkmark on "View > Proof Colors". Using the second way, you make the colors in the Photoshop as dull as they will be if you save your image for web (File > Save for Web) with both "Embed Color Profile" and "Convert to sRGB" check boxes unchecked.

Which way is prefered: the first, the second, or some another?

One guy on Internet answered that "the first way isnt really a way at all, its more like let me do random transform on image and hope it dont screw things much. It does nothing to keep colors that are outside the are a of sRGB, or even control how to convert them. This method fine if you dont expect colors to come out the same, which is not your question. The second way you suggest is just plain nonfunctional."

But he haven't provide a solution that is good from his own point of view.

[NB, colourmanagement net]

For web, work on your images in sRGB colourspace.

When you save, set the system to embed the sRGB ICC profile. 

Now, the receiving application such as a web browser will read sRGB, thus it will "know" the meaning of each pixel's RGB colour numbers and convert those to the display profile on the receiving machine. 

I hope this helps
neil barstow, colourmanagement net :: adobe forum volunteer:: co-author: 'getting colour right'
google me "neil barstow colourmanagement" for lots of free articles on colour management

[D Fosse]

The problem with Save For Web, which has plagued the internet since the beginning of time, is that it has all color management turned off by default. So it doesn't match Photoshop, which is always color managed.

To enable it, set Preview to "Use Document Profile". That's the only sensible setting, and it will show you how it will look in any modern, color managed web browser.

Also, always check "embed profile". Strictly speaking it isn't required just for web use, because all browsers today will assign sRGB to any untagged material, and color manage based on that. But other applications don't do that.

Lots of people with limited understanding will try to complicate this ("some guy on the internet"). Don't pay any attention.

• Preview Use Document Profile
• Convert to sRGB
• Embed profile
• Done.

BTW Export As has simplified this a bit, but it's been incredibly buggy lately, and it still doesn't color manage correctly. I still avoid it.

[Doe Johns]

Convert to sRGB

But isn't it better to convert the image to sRGB beforehand? That is, to change the workflow from

1. Open the image.

2. Edit it (e.g., add an UFO in the sky).

3. Save it for web with both "Convert to sRGB" and "Embed Color Profile" check boxes

to:

1. Open the image.

2. Convert is color profile to sRGB: click "Edit > Convert to Profile", and select "Working RGB - sRGB IEC61966-2.1" or just "IEC61966-2.1" as destination profile.

3. Edit the image

4. Save it for web with only "Embed Color Profile" check box

[TheDigitalDog]

 But isn't it better to convert the image to sRGB beforehand?

Well like all complext issues, it depends. 

IF the image is only going out to the web, sure, you could convert first. 

But what if you're printing the image? And you're working from a wider color gamut original? You convert next to last. 

Its like having an image that's 5000x4500 pixels in size. If you resize for the web output first, you lose all the additional pixels (resolution) from the get go. You might want those pixels for something else. 

IMHO, sRGB is an output color space for the web and moble devices. So I convert last (or resize, convert, then save) all of which Save for Web etc, can do. 

[Doe Johns]

Thanks, that's exactly what I mean.

[D Fosse · Accepted solution]

I didn't necessarily mean to imply an order, just so long as it's done. That's the important thing for web use.

If it's just a conversion, a "knockoff" copy from a master file, it doesn't matter where you do it. You'll probably get some clipping, but that doesn't have to be a problem.

If you're going to do any gamut remapping to make sure everything is within sRGB gamut without clipping, you necessarily have to do it on the full data, before it goes to SFW. But that would be for particularly critical purposes.

[Doe Johns]

@D Fosse Thanks! I marked this comment as the answer, as everything is clear now. You, and Neil Barstow, and TheDigitalDog are awesome.

[NB, colourmanagement net]

Doe, thanks, much appreciate your "thanks".

I hope this helps
neil barstow, colourmanagement net :: adobe forum volunteer:: co-author: 'getting colour right'
google me "neil barstow colourmanagement" for lots of free articles on colour management

[TheDigitalDog]

You can't 'see' what others see if your images on the web. And when a browser isn't color managed, all bets are way off.

You can see on YOUR system what your sRGB (or any color space document) would look like without color management which is rather pointless but exist. There are three options for soft-proofing images as they may appear outside ICC aware applications. Macintosh RGB, Windows RGB, and Monitor RGB are each different ways to soft-proof a document without using Photoshop’s color management display architecture. On your display/machine, not others.

As others have said, convert and embed to sRGB, that's the best solution in a situation where the solution isn't very robust. There is again, no guarantee others will see the image as you saw it, on your display, calibrated and profiled hopefully, in a color managed application.