Help me with Photoshop Save for Web color issues.

[eric_perlberg]

Maybe this example will help.

 

Say you have an aRGB file with the numbers 1 through 20. Your monitor is capable of

showing the numbers 1 through 15 and sRGB is capable of showing the numbers

1 through 13.

 

When you're looking at your aRGB file on your monitor you see the 1 through 15

data in your file but you don't see 16 through 20 because your monitor can't

display that. Whether you convert this doc to your monitor profile or embed/tag the

monitor profile to the doc, from Safari's point of view it will show the numbers 1

through 15 and voila it will look just like your photoshop file did.

 

Convert to sRGB and you'll see the numbers 1 through 13 and you're saying, hey!,

my monitor profile makes my image look just like photoshop and its closer than sRGB.

 

I think that's what's going on.

[elliot_n]

Again, when I convert my PSD from the aRGB colorspace to the sRGB colorspace I see no

clipping of colour. It is only when jpegged and opened in Safari that the colour is clipped.

 

If I choose to embed a profile during the 'Save for Web' process, then Safari renders the

sRGB jpeg properly (it matches the original aRGB photoshop document). Without an

embedded profile, the image is washed out.

 

Screen-grab attached of two jpegs rendered in two different Safari windows. Both jpegs

were created in Photoshop's 'Save For web', from my original aRGB photoshop document

(which had been converted to sRGB). The only difference is that the jpeg on the right has

an embedded profile.<div></div>

[eric_perlberg]

It seems to me you've answered your own question. The image on the left if I understand

correctly is converted to sRGB and in the Save For Web dialogue its saved as a jpg with no

embedded profile. The image on the right is done the same way, convert the data to sRGB

and in the Save for Web dialogue you attach/tag/embed your monitor profile. The data in

the file is the converted sRGB data. There is no longer the aRGB data in the file.

 

But by telling safari to interpret the sRGB data in terms of your monitor profile, Safari

reinterprets the sRGB data and comes up with the image on the right. This shows the

power of your monitor profile on both the aRGB data in photoshop and the Safari jpg with

the embedded monitor profile. While it may seem that embedded profile jpg is just

remaining more accurate, I don't think so. The sRGB data in the embedded profile jpg is

being stretched to fill your monitor colour space. Doing this in Firefox would result in a

very different set of results. The same for IE on a PC but IE on a mac will work similarly to

Safari.

 

That this file with the embedded profile is to you more "accurate" is the result of two other

situations, the first is your monitor colour space carried in the embedded profile and the

second is that Safari is a rare exception of a web browser which can interpret data in terms

of an embedded profile. If you open the files in Preview you'll probably have the same

experience because it too can interpret data with a tagged

profile. Import both images into Word and you'll see something very different.

 

The main point being that (I"m assuming I'm right, its possible to know what one is talking

about and still be wrong...) in your last set of screen images, both files "only" have the

sRGB data to work with. In the latter, that data is "stretched" to fit your monitor profile and

results in what in you've shown us. Again, if you printed both the original aRGB photo at

reasonable size (say 8x10) and you printed the sRGB file with your embedded monitor

profile at the same size, I bet you would see a difference between those two assuming it

was a printer capable of showing aRGB colour space.

[elliot_n]

'The image on the right is done the same way, convert the data to sRGB and in the Save for

Web dialogue you attach/tag/embed your monitor profile.'

 

No!

 

When the 'ICC Profile' checkbox is ticked in the 'Save For Web' dialogue, then the

document's profile, not the monitor profile, is attached to the image.

 

In the example posted above, both jpegs are sRGB, but the one on the left has no profile,

whereas the one on the right has the sRGB profile attached.

 

What my test shows is that Safari will render an sRGB jpeg correctly when it has a profile

attached. But when an sRGB jpeg is stripped of its profile (as is common practice for

images destined for the web), then Safari renders the jpeg incorrectly, using the Operating

System's monitor profile instead of the sRGB profile. The same applies with Apple's

Preview software.

 

This false rendering is easily simulated in Photoshop. I just take my sRGB Photoshop

document and 'Assign' my monitor profile (as opposed to 'Converting To') - the image

becomes lighter and loses saturation, just as in the last screen-grab I posted.

 

(Whether these anomalies have any relevance to the original poster's question I'm not sure,

as he is on Windows and using Windows Picture Viewer. Sorry I have taken this thread in

an unhelpful direction.)

[eric_perlberg]

I also apologise to the original poster but since we're into this this far might as well see it

through.

 

Mac use of colour management is notorious for not being joined up, for example the

teams that work on these various bits like colorsync itself and then Preview and then Safari

don't necessarily share the same fundamental concepts.

 

What you've established, and I concur, is that there is some anomoly in the way Safari

interprets data with and without a profile is not accurate. So be it. Now that you bring it up

I remember reading exactly your statement and this strange behaviour on the colorsync

list. It's a tiny little blip in Apple's implementation or misimplementation of its own

standards.

 

Now lets go back to the original post and your original answer. This chap Greg asks what

he's doing wrong as his images for the web don't look right. You tell him to convert to the

monitor profile. Given all that you and I just went through and your final statement that

Safari has some glitch in interpreting data with and without an embedded profile, why did

you tell him to convert to his monitor profile?

[elliot_n]

'Given all that you and I just went through and your final statement that Safari has some

glitch in interpreting data with and without an embedded profile, why did you tell him to

convert to his monitor profile?'

 

Er, I didn't tell him to, I just suggested he try it - it's a 5 second experiment!

 

I don't have an agenda. I don't know the colorsync list. Some of the tests I've presented in

this discussion have been a revelation to me.

 

I'm a photographer and I'm about to redesign my website, and therefore these issues are

of interest to me.

 

Last time I did my site (about a year ago) I noticed that by converting my images to my

monitor profile, my jpegs better matched my photoshop documents. And so that's how I

created all my jpegs.

 

I've since read arguments that although my jpegs may look better on my system, for best

overall compatability I should be converting to sRGB. I'm nearly convinced, but I still have a

few doubts.

 

The audience for my website mainly use Macs - about two thirds using IE, and one third

using Safari. I don't know if that has a bearing on my workflow. Maybe I should be

embedding that profile into my jpegs?

 

In the end I don't think it really matters that much - a little lighter or darker, more or less

saturation.

 

But it's an interesting discusssion (to me, anyway - I'm sure the moderator will delete it!).

 

Thank you.

[greglyon]

Eric and Elliot, no apologies needed! Your discussions may have been tangential, but certainly in the ballpark of my question.It's making me think harder about color spaces and that's what I need to do anyway to understand this better.

 

Elliot, I tried your suggested solution, it works! I thought I'd tried it last night but didn't read correctly. It's perhaps a bit 'heavy' on other monitors, but at least it isn't washed out.

 

Richard, I came somewhat close to matching my aRGB file using your methods but it was tedious, and I haven't got it completely so far. Turns out I didn't have to change saturation at all, it was color balance that was off. In fact it was as if a different white balance had been applied to the image.

 

So now I'm wondering if my sRGB profile could be corrupted somehow. Maybe my new monitor software did something to it. Does anybody have any suggestions about verifying my profile? If I can get the original profile off the CD I'll try that out.

[greglyon]

Here's the photo after Convert to Profile >sRGB, then Save for web.<div></div>

[greglyon]

And here's the photo converting to my monitor's profile. (other steps the same as previous post). This photo, viewed in Firefox or IE looks much closer to the Adobe RGB file in photoshop than the sRGB one does.<div></div>

[arnulf]

I just want to go back to the original post and say that I am experiencing the same

problem Greg has. What puzzles me is that it has started to occur only recently. I've been

saving my pics with the "save for web" feature many times before, and they have come out

just like the original. I have never had to convert them to a different profile or anytning

like that. But some days ago my pictures started to look pale and desaturated when I

chose "save for web".

<p>

I have tried to convert to other profile, and that helps a little, but the picures are still very

much paler than the original.

<p>

I can not see that I have changed any settings, but it's hard to believe something like this

just happens.

<p>

Anyone?

[greglyon]

Arnulf:

After fighting this for a while I have to conclude there are two issues at play for me...

 

1) Something is wrong with my sRGB profile. I still haven't had a chance to see if I can reload it from the CD...I think it's a single file though...

 

2) I have a new and better monitor. Things that look like subtle differences on standard office monitors stand out more on my new one. The big difference is subtle color & brightness of midtones to dark tones. There seems to be more range of brightness available.

 

For now, I'll edit photos until they're right on my screen and for print and save them. Then for web I'll do: Image, Mode, Convert to profile, then choose my monitor profile. THEN save for web. THEN DONT save the original version when closing (so as not to leave the Monitor RGB profile intact.)

 

I'm at work now and notice that this monitor doesnt even have a monitor profile, I suppose that means it's not always an option. ALSO, on this monitor the differences between my final two photos (above) are much less noticable than on my home monitor.

[arnulf]

Greg. Actually, I seemed to have solved my problem. I suddenly noticed a detail in the

posting from Walter Tatulinski about choosing Document Color Profile in the "save for web"

dialog. I'd never even seen this option before, but somehow this was changed to

Uncompensated Color. This was the reason <i>my</i> shots were desaturated. Don't know

wether this is the case for you.

[greglyon]

I tried that, and while it worked in the save-for-web dialog it had no effect on the final jpg for me. I'm glad it worked for you, but it makes me wonder if there's something wrong with my photoshop installation.

[elliot_n]

As Greg says, choosing Document Color Profile in the "save for web" dialog, has no effect

on the final jpeg, it just effects how the jpeg is previewed within the "save for web" dialog.

[greglyon]

Oh, so that's expected behaviour? Huh, I thought something was wrong and it wasn't working on mine. Well at least I know that one piece is working as expected then. Thanks Elliot!

[kevin_smith19]

wow. i'm so glad i found this post! i'm in the same situation regarding saving images for the web in photoshop cs (version #1) and i can't figure out why. i was google searching answers for the problem when i found this post (and subsequently joined photo.net!).

 

i will have to try some of these suggestions in this post.

[sidetracked]

Haven't read quite all of the replies, but I have been having similar issues. One thing I noticed is that Safari successfully reads embedded color profiles in JPEG images... so you can just save as Adobe 1998, and it will look the same as in photoshop... or convert so sRGB and it still looks good in Safari (I'm using the latest update of Tiger...).

 

HOWEVER, this is NOT true about firefox, Opera, or IE (i think. haven't tested IE myself). They don't care about ICC profiles (see link: http://www.tbray.org/ongoing/When/200x/2005/03/30/Mac-Browser-Roundup) and show my image as flat.

 

I posted a screenshot and some details here: http://www.deviantart.com/deviation/22971479/

 

The original image that inspired my looking into this: http://www.deviantart.com/view/22966751/

 

I want to try a bit more testing before I come to any conclusions, and I'll be sure to post what I find out here.

-sidetracked

http://sidetracked.deviantart.com/

[sidetracked]

Ok, I did a few of my own tests. My optimal solution: Convert to sRGB then save as a jpeg (not save for web since that ditches exif info) and ebed the color profile in the hopes that either some people will be using safari and will see it correctly, or that the other browsers will someday correctly read embedded color profiles.

Read more (and see some screenshots) here: http://sidetracked.deviantart.com/journal/6531292/

 

-sidetracked (Alex Y.)

 

http://sidetracked.deviantart.com/

[fr]

Encountering this exact problem myself on my Powerbook, I found these pages.

 

<p><a href="http://www.northlight-images.co.uk/webphotos.html">http://www.northlight-images.co.uk/webphotos.html</a>

 

<p><a href=" http://www.northlight-images.co.uk/article_pages/web-browser-color-management.html">

http://www.northlight-images.co.uk/article_pages/web-browser-color-management.html</a>

 

<p>Seems that Safari is the only browser that deals with the colour profiles correctly.

 

<p>But since most viewers will be on a PC using IE, Mozilla or Firefox, I tried converting the profile to sRGB profiles for my images to see if this solves the problem. It got a little better - but still looks wrong in the two other browsers I have: Firefox and Internet Explorer (on OS X).

 

<p>Frez

[fr]

Oops! Alex - it looks like you posted the same info while I was playing in PS :D

[sidetracked]

Frez, great links! Thanks!

[fr]

Just wanted to report that after finally catching up on all the previous posts, I converted the images to my monitor's calibrated profile and the images look as I expect in the browsers and other programs. The only thing now is to see how it looks on other people's computers *shudder* :)

[jouko_ruuskanen]

I'm on windows, experiencing the exactly same problems. I calibrated my monitor using ColorVision Spyder, and everything looked good, except for the color shif in Save For Web.

After experimenting a bit I removed the Spyder created profile from my display setting, and now the colors match!

In my case it was the monitor profile that messed things up. But now my monitor is not profiled!

[greglyon]

Jouko, I finally realized that was when my problem started...When I got a new monitor that had it's own color profile.

 

My final solution is to leave the monitor profile active and do a Convert to Profile to the monitor profile before I save for web. That seems to get closest to what I see on screen when I look at it on different monitors.

[hknauer]

I've read this post backward and forward but it doesn't address what I experience on some of my images. My goal is to get an image on the web that when viewed by others in their browsers (IE) will be close to what I see on my screen in photoshop.

 

The problem that I have is this. I have an image I like in PS. I convert it from argb to srgb. I then Save for web. What I see in Save for web is that the "original" image as displayed in SfW is not close to what I see in PS. I eyedropped a patch of red in the PS image and then edited the save for web image in imageready and eyedropped it in IR. 217,39,39 in PS and 239,43,34 in IR. First question I have is why are they different?

 

Moving on from there, in Save for Web, the target image, what SfW says is the Jpeg, looks like what I want. It looks like the PS image. BUT. when I do the save,and then go to IE to view the web site, guess what. It looks like the SfW source image and not like my PS image and not like the SfW jpg target image.

 

This all occurs no matter what my monitor profile is. To summarize, I get a color shift when saving to a jpeg and viewing on my monitor as well as others.

 

Hope someone can help.