Photoshop, save for web - color settings??

[Thomas Krüger]

Using the Photoshop option "Save for Web" the output in jpg didn't match the colors in Photoshop. So I switched the color setting for the working space in PS from sRGB to MonitorRGB - and the output in PS is ok.

But I don't understand why - any explanations are welcome.

Settings sRGB: Color Original image + Save for web window
[attachment=6139:attachment]

Settings MonitorRGB: Color Original image + Save for web window
[attachment=6138:attachment]

[01af]

Your monitor sports a colour gamut that is wider than sRGB, doesn't it?

"The Web" is considered a non-colour-managed environment. So Save For Web will show you the image the way it will look when viewed in a non-colour-managed environment. Switching Photoshop's working colour space to, or soft-proofing for, Monitor RGB will do the same. So in Monitor RGB, colours will naturally match those displayed by Save For Web. In any other colour space, they usually won't.

Still, you mustn't think that Monitor RGB will enable you to see your images the way other users (i. e. those on the other side of the Web) are going to see them in their web browsers. Instead, it shows how your images will look like when viewed in a non-colour-managed environment on your monitor. People using different monitors in non-colour-managed environments will see different colours.

So even when your images appear strangely coloured in Save For Web, you should still process them in Photoshop using sRGB as the working space and with the proper monitor ICC profile installed in your system, and ignore the distorted appearance in Save For Web. This way, you will create sRGB images properly---and the odds are that the people on the other side (or most of them) will be able to see them correctly, more or less ...

-- Olaf

[mistybreeze]

From my perspective, there are a lot of photographers struggling with this feature. They give up on it quickly because they don't know what's wrong and why they get conflicting colors in all the various samples. I sure wish one of our beloved gurus would offer a smart workflow and some guidance on how best to deal with the mysteries surrounding this feature.

Some photographers say you need to tweak your original image with a curve to get it to look closer to its original state after "Save for Web" has been applied. But it's difficult to do this without a two-screen set-up. A fix-curve can also lead towards other color issues in other parts of your image that were fine. The Save for Web feature is very confusing.

Lately, I've been leaving my images in 16 bit/ProPhoto and after I resize them for the web, I hit Edit>Convert to Profile, and then I convert the image to sRGB. Then I open Save for Web and I find very little color change has taken place. The nice thing about Save for Web, it flattens any layers and automatically converts 16 bit files to 8 bit. Maybe this process has the power to change color, I don't know. I feel lucky my workflow has been working for me.

[digitaldog]

From my perspective, there are a lot of photographers struggling with this feature. They give up on it quickly because they don't know what's wrong and why they get conflicting colors in all the various samples. I sure wish one of our beloved gurus would offer a smart workflow and some guidance on how best to deal with the mysteries surrounding this feature.

Its pretty simple really. Unless you're using Safari or the beta of FireFox, your browser isn't color managed and even uploading a document in sRGB does NOT guarantee it will match Photoshop. The Photoshop preview is correct because it uses both the display profile and the embedded profile (in this case sRGB) to build a preview to screen. Non ICC aware applications simply send the RGB numbers to the display. They don't know anything about the fact that you've got a display profile or that the data is in sRGB. So, the two don't match.

When you set Photoshop for Monitor RGB (which isn't a good idea) or use the Proof Setup and select Monitor RGB, Photoshop acts like a dumb web browser and the previews match. Don't you feel better now that Photoshop is equally incorrectly previewing the numbers incorrectly (but using color management to do so)?

Short of using an ICC aware browser, there's never a guarantee that Photoshop or any other ICC aware application will match.

[mistybreeze]

Short of using an ICC aware browser, there's never a guarantee that Photoshop or any other ICC aware application will match.

And so it goes, why give a damn. No wonder few people care about Save for Web (although I do love the "quality" preview feature). Safari users are a pretty small number. Safari happens to be my default Preview browser for web design, so I guess I enjoy it reading the ICC profile. Given the growth of digital photography, is there any chance (or talk) the other main browsers might get with the program?

[Thomas Krüger]

Seems that I'm not the only one with "Save for the web" and color problems in Photoshop. This article from a web designer goes through the settings in PS how to disable the color management:
http://www.viget.com/inspire/the-mysteriou...eb-color-shift/

Loading the converted jpg in a browser the colors are the same as in Photoshop - at least on my monitor in the studio.

[digitaldog]

Seems that I'm not the only one with "Save for the web" and color problems in Photoshop. This article from a web designer goes through the settings in PS how to disable the color management:

You can't disable color management in Photoshop! And there's no reason to try. This article is by a confused writer.

What he's done is hose the previews in Photoshop so they are just as wrong (only on this one machine) as the other dumb non ICC aware applications. And that did what to improve things?

Its akin to seeing an image that's too dark in Photoshop and cranking up the brightness so it looks lighter. That's a fix? Nope.

Worse, there's a way to have Photoshop preview how images on YOUR machine would look on YOUR non ICC web browser that he shows in step 2 without hosing the rest of the application by doing something as dumb as setting the color settings as illustrated. Just setup a soft proof using Monitor RGB. But in the end, until more browsers are ICC aware, there's nothing more you can do than leave Photoshop setup PROPERLY and convert files to sRGB for the web, then hope for the best.

[wesley]

Using the Photoshop option "Save for Web" the output in jpg didn't match the colors in Photoshop. So I switched the color setting for the working space in PS from sRGB to MonitorRGB - and the output in PS is ok.

But I don't understand why - any explanations are welcome.

Settings sRGB: Color Original image + Save for web window
[attachment=6139:attachment]

Settings MonitorRGB: Color Original image + Save for web window
[attachment=6138:attachment]
[a href=\"index.php?act=findpost&pid=189684\"][{POST_SNAPBACK}][/a]

Hi,

Here's something I did up sometime ago, it might help. On no account should you change your working space in Photoshop to your monitor profile.

------------------------------
How to make sure images look the same in Photoshop (CS2) & Windows Fax/Image Viewer.

This is a quick & dirty guide for making color/contrast consistent from Photoshop to Windows Fax/Image Viewer. This guide will not attempt to explain the theory behind the steps. A few points to note before we start:

a. Make sure Adobe Gamma is switched off by removing it from the Startup folder.
b. Make sure monitor is profiled using a 3rd party profiling device (eg EyeOne).
c. Windows displays images in the sRGB color space.

Follow these steps to make sure the image color stays consistent in Photoshop & Windows Fax/Image Viewer:

1. If image is processed from a RAW file, please make sure that image output profile is set to either Adobe1998 or sRGB. Most photographers choose Adobe1998 since it has a larger colorspace vs sRGB.

2. Adobe Photoshop uses Adobe RGB 1998 as default working space. So if the image has been processed Adobe1998 profile, it will look the same from RAW converter preview and Photoshop.

3. After doing all the image adjustments, save the file. Do not close the file.

4. Select 'Edit -> Convert to sRGB Profile' option with Adobe ACE and Perceptual (No Black Point Compensation)'.

5. Select 'View -> Monitor RGB'. This is how your image will look like in Windows Fax/Image Viewer.

6. Select 'Export as Web'.

7. Open the jpg image Windows Fax/Image Viewer, it should look 99% close to the Photoshop image in Step 5.
------------------------------

[jjj]

In PS prior to CS3, one had to convert colour profile of image to sRGB  for any images destined for web just before saving as a jpeg. This is to avoid the usual washed out colours you get in non colour managed browsers, i.e. most of your viewers.
Now SFW automatically converts your images to a more web friendly space [or not if you really want to add extra steps to your workflow]. So one less thing to worry about. If you use the before and after view in SFW, you will see the difference, the optimised version will look better colour wise and more like the original image does in PS.
One can never guarantee how colours ones images will render, but by using sRGB for images saved for t'interweb, you will get a better hit rate/starting point.
This also means you can process your images in whatever colour space you need and not worry too much about the web colours, if using SFW in CS3 - in theory!

SFW is actually a very useful tool, but it seems most people get freaked out by it for some reason. Worth spending some time with it. You can even use it to make your web pages from your PS files.

[digitaldog]

1. If image is processed from a RAW file, please make sure that image output profile is set to either Adobe1998 or sRGB. Most photographers choose Adobe1998 since it has a larger colorspace vs sRGB.

Doesn't matter.

2. Adobe Photoshop uses Adobe RGB 1998 as default working space. So if the image has been processed Adobe1998 profile, it will look the same from RAW converter preview and Photoshop.

Maybe your copy. There is no default working space, that is, its solely based on the color settings presets (in fact, if memory serves me, Adobe still sets a clean install using North America Web which would set this to sRGB). Anyway, doesn't matter. Set the working space to what you wish to use most often, the preferred working space. For me that's ProPhoto RGB. YMMV.

4. Select 'Edit -> Convert to sRGB Profile' option with Adobe ACE and Perceptual (No Black Point Compensation)'.

Doesn't matter, all conversions with these simple matrix profiles use Relative Colorimetric. You can't get Perceptual, no such table exists in the profile. You can pick it, you're not getting it!. And there's no reason to convert the data, you can soft proof in any RGB color space (step 5) and you'll end up in sRGB using step 6.

5. Select 'View -> Monitor RGB'. This is how your image will look like in Windows Fax/Image Viewer.

Actually to cut to the chase, this is ALL you need to do (none of the stuff above is necessary). This sets the soft proof to make Photoshop preview images as stupidly as a non ICC application. Its using YOUR display profile so it will match the same image seen on YOUR machine in such applications but not anyone else.

6. Select 'Export as Web'.

Use Save for Web, make sure its set for sRGB. Now that document is ready to post to the web or send in an email, whatever. All this sure is easier out of Lightroom's web module <g>

[01af]

5. Select 'View -> Monitor RGB'. This is how your image will look like in Windows Fax/Image Viewer.[a href=\"index.php?act=findpost&pid=189877\"][{POST_SNAPBACK}][/a]

Actually to cut to the chase, this is ALL you need to do (none of the stuff above is necessary). This sets the soft proof to make Photoshop preview images as stupidly as a non-ICC application. Its using YOUR display profile so it will match the same image seen on YOUR machine in such applications but not anyone else.[a href=\"index.php?act=findpost&pid=189936\"][{POST_SNAPBACK}][/a]

And exactly that's why it is a silly idea to soft-proof to Monitor RGB in the first place. Don't do that! The rendering you'll see there has no relevance whatsoever.

Instead, have your monitor properly calibrated and then profiled, and use sRGB has the colour space for images intended for Web use. This way, you'll create neat and clean sRGB images---and exactly that is what you need for the Web. Forget Monitor RGB! And ignore the colour shift apparently caused by Save For Web! This colour shift is only virtual; do not try to compensate, or you'll screw up your images' colours.

-- Olaf

[digitaldog]

And exactly that's why it is a silly idea to soft-proof to Monitor RGB in the first place. Don't do that! The rendering you'll see there has no relevance whatsoever.

I agree. I don't see what good it does. You could just open the image in that stupid application and see it doesn't match. And it doesn't tell you what the same RGB values would look like on anyone else's non ICC aware system.

Instead, have your monitor properly calibrated and then profiled, and use sRGB has the colour space for images intended for Web use.

The problem is, unless you use an ICC aware web browser, it doesn't "know" the document is in sRGB and has no clue about that calibrated display. It just takes whatever RGB values it sees and sends them directly to the display. No profile compensation due to the color space nor the display profile. You either have to view the data in Safari and it matches the correct preview as seen in Photoshop or all bets are off.

The reason we send sRGB to the web isn't because the dumb web browser 'knows' its sRGB, its because most displays are closer to an sRGB behavior than anything else. We're trying to hit the broad side of the barn here. But sRGB documents on the web can't guarantee matching and correct color appearance UNLESS you use a ICC aware browser (and even then, Flash isn't color managed). Its a big mess. A mess that people are tying to fix incorrectly. What needs to happen is all browsers become ICC aware (or people who care about color just load Safari, its not like it cost anything). And of course they do need to profile their displays.

Photoshop is right (assuming its setup correctly and you profile the display). The browsers are not. Why butcher the correct application (Photoshop) to match the wrong application (browser)?

Its like driving along and you get a flat tire. So you get out of the car and puncture the other three tires so they match. That's not a very good solution!

[mistybreeze]

I'm happy to see (well, not really) that the conflicting information on this thread reflects the dubious attitude toward Save for Web in real life.

In PS prior to CS3, one had to convert colour profile of image to sRGB for any images destined for web just before saving as a jpeg. This is to avoid the usual washed out colours you get in non colour managed browsers, i.e. most of your viewers.
Now SFW automatically converts your images to a more web friendly space [or not if you really want to add extra steps to your workflow]. So one less thing to worry about. If you use the before and after view in SFW, you will see the difference, the optimised version will look better colour wise and more like the original image does in PS.

I've been working in ProPhoto color space for quite awhile. However, I find, if you leave your image in ProPhoto, without converting it to sRGB, BEFORE you bring the image into Save for Web, you risk enduring serious color shifts. For some reason (and not on all images), if you let Save for Web do the automatic ProPhoto-to-sRGB conversion, the "original" file as it appears in SFW is nothing like the actual original still sitting on your desktop. Yet, if you convert BEFORE entering SFW, almost no color shift occurs between originals. I've done numerous comparison tests to satisfy my own need to get it right. It's easy to test this on larger monitor screens.

For some reason, every time I left the image in ProPhoto and permitted SFW to do the automatic conversion to sRGB, the "original" in the SFW window shifted dramatically from the original on my desktop, particularly on images where skin and color mattered. It seemed to me, letting SFW do the profile conversion revealed the "somewhat dramatic" differences between ProPhoto color space and sRGB. Given that my entire studio agreed with my findings, maybe someone smarter can shed more light on this.

[jjj]

I've been working in ProPhoto color space for quite awhile. However, I find, if you leave your image in ProPhoto, without converting it to sRGB, BEFORE you bring the image into Save for Web, you risk enduring serious color shifts.
[a href=\"index.php?act=findpost&pid=189942\"][{POST_SNAPBACK}][/a]

Just checking, what view are you using?
As in SFW you will get an awful looking original image, but the Optimised looks OK. So if you have the view where you see just original, then you may be thrown.
Just tried what you suggested and on the image I used, I could see no difference, whether I chaged profile before or not.

[Carl Harsch]

To eliminate my forgetfulness and posting an image that I forgot to modify for the web, I wrote an action that resizes the image to my default size I prefer at 72dpi, converts the image to 8 bit sRGB.  I simply run this action, then sharpen for web output and save.

[jjj]

I have actions for saving to web, but I usually incorporate the sharpening and where to save to in the action as well as the resize. I have several actions for common web jobs. I also add an extra layer, then flatten all,convert profile and convert to 8 bit before SFW [EDITED to correct  booboo] so as to eliminate Action errors through layers not selected/turned on and to speed up the resize.
BTW specifying the dpi is completely and utterly pointless, it only matters when printing. You simply specify image size in pixels and that's it. Job done. Besides, to make this common error even more irrelevant, Windows [the most common platform] isn't even 72 dpi anyway, it's 96 dpi, it's the Mac that's 72dpi.

[01af]

The reason we send sRGB to the web isn't because the dumb web browser 'knows' its sRGB, its because most displays are closer to an sRGB behavior than anything else.[a href=\"index.php?act=findpost&pid=189941\"][{POST_SNAPBACK}][/a]

Exactly.

And furthermore, most users expect profile-less web images to be sRGB (unless explicitly stated otherwise), so if they try to colour-manage them---by downloading and then viewing them in a colour-managed application---then they'll have to assign sRGB as the images' profile. If however the images were created within some other person's obscure monitor gamut then everybody is at a loss.

But sRGB documents on the web can't guarantee matching and correct color appearance ...[a href=\"index.php?act=findpost&pid=189941\"][{POST_SNAPBACK}][/a]

True. But in general, with sRGB the mismatch will be the least, in general. Use any other colour profile for your web images, and the problems will multiply ... in particular if you're using what your monitor happens to employ as its own native colour gamut.

It's like driving along and you get a flat tire. So you get out of the car and puncture the other three tires so they match.[a href=\"index.php?act=findpost&pid=189941\"][{POST_SNAPBACK}][/a]

LOL! That's a nice analogy, and just to the point indeed.

I have actions for saving to web [...] and convert to 8 bit before the convert to sRGB ...[a href=\"index.php?act=findpost&pid=189963\"][{POST_SNAPBACK}][/a]

Always do the colour profile conversions before switching down to 8 bits/channel!

BTW specifying the dpi is completely and utterly pointless ...[a href=\"index.php?act=findpost&pid=189963\"][{POST_SNAPBACK}][/a]

No, it's not. Or technically it is indeed ... but the EXIF 2.2 standard says DPI (or PPI actually) must be set to 72 for images with unknown or undefined output resolution; it's illegal to leave this field empty or to set it to zero. So the magic number of 72 here stands for "output resolution unknown, undefined, or yet to be determined." In particular, digital cameras are supposed to write 72 into the DPI fields of the image files they produce. Unfortunately, only a few camera manufacturers stick to this rule; many don't. Canon uses the number 180; Nikon uses 300 ... which makes some clueless people believe Nikon cameras have higher resolution than Canon's.

-- Olaf

[BenjaminJ]

If you are just editing for screen display/web publishing, i guess using sRGB as your working space is most logical?

Edit>Color Settings>Working Spaces>RGB -> set this to sRGB

In my case, this leaves a small but acceptable hue difference in the SFW preview.

The point Olaf makes about converting to sRGB before converting to 8-bit mode is an important one. The conversion is much more destructive in 8-bit mode.

[jjj]

Or technically it is indeed ... but the EXIF 2.2 standard says DPI (or PPI actually) must be set to 72 for images with unknown or undefined output resolution; it's illegal to leave this field empty or to set it to zero.
[a href=\"index.php?act=findpost&pid=189981\"][{POST_SNAPBACK}][/a]

So who's been arrested so far?  

Always do the colour profile conversions before switching down to 8 bits/channel!

Actually I do. I just typed the wrong thing, duh! I should have said I also convert to 8bit before using SFW [not before colour profile].

[01af]

If you are just editing for screen display or web publishing, I guess using sRGB as your working space is most logical?[a href=\"index.php?act=findpost&pid=190023\"][{POST_SNAPBACK}][/a]

Yes, indeed.

In my case, this leaves a small but acceptable hue difference in the Save For Web preview.[a href=\"index.php?act=findpost&pid=190023\"][{POST_SNAPBACK}][/a]

Ignore this hue shift! Whether it's small or big depends on your monitor's native colour gamut. When you have a modern, wide-gamut monitor then this hue shift will be stronger. The wider your monitor's gamut, the more important it is to have it properly profiled---and the less sense it'll make to soft-proof to Monitor RGB. After all, you're supposed to prepare sRGB images rather than images that appear correctly on your monitor when viewed in non-colour-managed mode.

-- Olaf