Jump to content

Help me with Photoshop Save for Web color issues.


Recommended Posts

I'm having trouble matching the color I see in Photoshop with the

colors of my JPGs as I'm saving them for web use. Once saved as a

JPG the image looks quite dull compared to the photoshop image. I

assume it's a color space issue but haven't been able to figure it

out.

<p>

When preparing images for the web in photoshop CS I typically perform

the following steps to my photos:

 

<ol>

<li>resize photo to final size

<li>apply sharpening

<li>Convert from Adobe RGB to sRGB using 'convert to profile'

<li>Choose Save for web (pick options and save).

</ol>

 

Invariably I get an image that looks desaturated and cooler than what

I see in photoshop.

<p>

So, what am I doing wrong, or what step have I skipped?

<p>

Here's an example of the difference. This is a screen capture of the

left half of the Jpg in windows picture viewer over the original file

in photoshop.<div>00DRb6-25496084.jpg.b552bc1f7cf61d0e8c1197ceb8d25592.jpg</div>

Link to comment
Share on other sites

  • Replies 72
  • Created
  • Last Reply

Top Posters In This Topic

I usually (because I had similar issues depending on my workspace color settings and what the embedded color profile of the image) convert the image profile to sRGB before saving for web. doing this may not be the best way to fix your problem but it worked for me. there might still be some differences but the results are usually close enough for my taste. it is the web after all.
Link to comment
Share on other sites

<b>Albert</b>: Yes, I tried outputting using all 4 settings, but while they affect the view in <i>save for web</i>, none seem to stick with the JPG. In other words, once I view the saved file it looks the same no matter which choice I make in the save for web options.

 

<p><b>Richard</b>: I hate to think that that's the only way to get the colors to match! So, do you mean that really I'll have to do that with every jpg, or settle for desaturated looking web photos? Surely there must be a better way!

Link to comment
Share on other sites

Hmmm...interesting problem. If you use Elliot's method the photograph won't look right on other monitors. You seem to be doing everything that I do and my photographs look fine. I convert to sRGB using Perceptual intent and then Save for Web. What is a little different is that I also select ICC profile and Use Document Color Profile in the Save for Web. What viewer are you using after you do the Save for Web? I use AcDc 7; as I said, the photographs look as they do in PS. What operating system are you using? I assume that you are using some version of Windows. Do you have any kind of color management applications being loaded (Adobe Gamma, for example)? Regards.
Link to comment
Share on other sites

Well here's more info, but no solution yet:

<ul>

<li>Windows XP, SP2. Photoshop CS with patches.

<li>Whenever I view the photos in color managed applications (Photoshop and NikonView) it looks correct. Non color managed applications: Windows File&Fax viewer, IE, etc all show the desaturated version.

<li>I have an ATI Radeon video card and Dell 1905FP monitor. There is a profile loaded in color management (display>settings>advanced>colormanagement) for the Dell monitor.

<li>I'm running Quick Gamma.

<li>I've tried several different ways to fix the problem:

<ol>

<li>During Convert to profile I've tried Perceptual and Relative Calorimetric.

<li>During save for web I've tried Standard windows and Document color.

<li>I've converted to sRGB then chosen SAVE AS (instead of save for web)

</ol>

<li>Each of those resulted in the same desaturated image.

</ul>

It seems to me as if my images are never really being converted from Adobe RGB to sRGB at all, and because of that only my color managed programs read them correctly...

<p>

In closing let me just say: ARRGH! This is very frustrating!

Link to comment
Share on other sites

I'm sorry for discounting your suggestion Richard. For some reason I thought that I'd be able to get a photo right in photoshop and then use it for both web and print. If it takes multiple versions of each photo to get good output then so be it.

<p>

I'm trying out your suggestion now, how do <i>you</i> go about it though? What I'm trying is to have the original photo open AND a copy in the Proof/monitor RGB, then tweak to make them look the same. It looks like the switch from Adobe RGB to Unmanaged color space applies a color shift to my photo, but it's hard to get it to match correctly.

<p>

Do you find that it's always the same change that's required from photo to photo? Or does each photo require two separate files to achieve a similar look for web, print, and photoshop? If the same amount of change is required each time I could create an action for it, but I suppose that's too much to hope for?!?

Link to comment
Share on other sites

Greg, this is after all what the Proofing function in PS is all about. As for is it the same every time? No, because you might have different colors and the profiles may handle them differently from time to time. That said, I have an action I use sometimes where I add some saturation and tweak a bit on the green/magenta areas and it seems to work most of the time. I do more B&W than color recently so have not done it much lately.

 

Just do this: View menu, Proof Setup and choose Monitor RGB. Then open Saturation and adjust as you see fit. Will it be exact? Probably not but who's to say your "original" is "exact"? Just tweak it a bit until you like it then do a Save for Web...

Link to comment
Share on other sites

'Just do this: View menu, Proof Setup and choose Monitor RGB. Then open Saturation and

adjust as you see fit.'

 

It is surely quicker and more accurate to just convert the Adobe RGB file to the Monitor

profile and then Save for Web (stripping the profile)?

 

(The above method is just converting to the monitor profile manually, isn't it?)

Link to comment
Share on other sites

I don't understand the logic of converting to one's own monitor profile. Since everyone has

a different monitor and the profile is specific to your own, this only guarentees that your

docs look good on your own monitor. There's a certain amount of variabiliity you have to

accept with images on the web but it shouldn't be as bad as your samples.

 

Any professional that I've ever spoke to and my own rather extensive experience creating

images for the web dictates to convert to sRGB which is about as close to a generic

monitor profile as there is.

 

Web and print images need to be prepared separately unless you're sending images to a

printing service which requires or is based on sRGB as the "profile". Un-colour managed

programmes are simply passing through the colour numbers which they are sent. Since

sRGB is the lowest common denominator in the colour management world, its the best for

these situations to have the file converted so that the raw numbers passed through are

sRGB numbers.

 

I don't see the kinds of shifts you're getting in your un-colour managed screen dumps

unless I fail to convert to sRGB and the doc is in aRGB or prophoto. Could you have a

currupted (or wrongly named) sRGB profile in photoshop?

Link to comment
Share on other sites

'I don't understand the logic of converting to one's own monitor profile... this only

guarantees that your docs look good on your own monitor.'

 

That's all I'm arguing... that if you want your Adobe RGB images to look the same in YOUR

web browser, on YOUR computer, then converting to YOUR monitor profile is the best way

to achieve this result. I accept that converting to sRGB is better practice, as whilst the

JPEGs may look a bit out of whack on your own computer, by and large they will look ok on

the average computer.

Link to comment
Share on other sites

<i>as whilst the JPEGs may look a bit out of whack on your own computer, by and large they

will look ok on the average computer.</i>

<p>

I don't find that converted images (aRGB to sRGB) look out of wack on my computer screen.

Since Greg's original query was about "JPGs as I'm saving them for web use" I would have

thought he was interested in showing the images to others not looking at his monitor?

Link to comment
Share on other sites

'I don't find that converted images (aRGB to sRGB) look out of wack on my computer

screen.'

 

That's good, and that seems to be the general experience.

 

I'm pretty sure that the reason I do see a shift when converting from aRGB to sRGB (and

then saving for web), is that I have a weird monitor profile (I use a lowly eMac and the

friend who calibrated using BasICColor software, had to pump up the brightness, in order

to be able to differentiate the darkest tones in Photoshop step-wedges). Safari, Preview

etc. assume the monitor profile when rendering a jpeg that has no profile attached. So by

converting to my monitor profile, things look right on my computer. But wrong on other

computers. So converting to sRGB is still best practice. And I should get a better

computer/monitor.

Link to comment
Share on other sites

hmmm, this is going to get confusing....

 

The first screen-grab I posted, is supposed to illustrate how converting to sRGB, prior to

saving-for-web, results in a washed-out jpeg in Safari (left-side of screen-grab). (The

original Photoshop file is on the right-side of the screen-grab.)

 

In the second screen-grab, I've converted to my monitor profile rather than sRGB, and I

think the resulting jpeg in Safari (left-side of screen-grab), is a better match to the

original Photoshop file (right-side of screen-grab).

Link to comment
Share on other sites

I'm not aware of emacs being difficult to make monitor profiles for, at least I haven't come

across that problem. Do you know how bright you had to set it in cd/m2?

<p>

Here's what I think is going on in your screen shots.

<p>

When you look at a photoshop doc on your monitor and its in aRGB, the monitor is doing

its best to show you how the document would look in aRGB within your profiled monitor's

limitations of colour gamut. Roughly speaking your monitor is about at the level of sRGB,

maybe a tad better.<p>

 

When you convert to sRGB as in screen grabs one, there will be a change in certain areas,

especially more saturated colours and when you view this converted to sRGB image in

Safari you're seeing the slight loss of saturated colours, esp in the blues in the sky and

maybe a bit of the greens and some red tint in the ground.

<p>

<a href="http://www.drycreekphoto.com/Learn/color_spaces.htm">Here</a> is a

comparison of the two colour spaces and as you can see at the bottom, the blues in sRGB

are clipped compared to their aRGB cousins. Now the diagramme at this web site is flat but

colour spaces are really 3D (the dimension missing here are the gradations towards pastel

and eventually white)<p>

To further complicate matters, you can't see any colours that your monitor can't produce

whether or not they are in sRGB or aRGB. So when you do your aRGB to sRGB conversion

you are seeing the loss of saturation mentioned above but the photoshop aRGB document

is already limited by the monitor profile so that's the extent of your emac's ability to show

the aRGB doc regardless of what's really in it.<p>

But in the second screen grab you've converted the aRGB doc (which probably contains

saturated colours than you can't see on your monitor because its limited by your monitor

+profile) into your monitor profile which was the limiting factor in any case, the result is

that you're not seeing any difference. However, I'll bet that if you have a good printer and

printed out all these files a) you'd see a difference between the sRGB and aRGB doc on the

one hand AND b) you'd see a difference between the aRGB and your converted-to-monitor

image on the other. Does that make sense?

Link to comment
Share on other sites

'Does that make sense?'

 

Hmm, sort of...

 

Thing is, when I convert my aRGB document to sRGB in Photoshop I see NO CHANGE in

colour - the saturated blues in the sky remain the same. It is only when I 'Save For Web'

(no profile embedded), and then open resulting jpeg in Safari, that I see a shift in colour. I

don't think the issue is that the sRGB colorspace is clipping the most saturated colours in

my document. I think the issue is that Safari applies my monitor profile to untagged jpegs.

 

I appreciate your efforts to think this one through. (And I'm not contesting the common

advice that images destined for the web should be converted to sRGB before using 'Save

For Web')

Link to comment
Share on other sites

<i>I think the issue is that Safari applies my monitor profile to untagged jpegs.</i><p>

Not exactly<p>

When you <i>convert</i> your doc to sRGB and then look at it in Safari, there is no

profile attached (ie, tagged, ie, embedded). Rather the data in the jpg you're viewing only

contains sRGB data (the rest having been thrown away in the conversion process, so its as

if it were tagged in sRGB but there are no tags involved.<p>

If you're using <i>convert to profile</i> on the second jpg, then there's not a monitor

profile attached to this doc either, the info has been converted to and is limited to the

monitor profile space data<p>

What Safari is capable of doing but which you're not doing in either of your examples is

reading "tagged" or sometimes referred to as "embedded" profiles. Here all the original file

info is kept (in your case all the aRGB data) but its tagged with a different colour space

marker which Safari is able to understand and then interprets the aRGB data (all of which is

still with the file) and displays it as though it were converted to sRGB or your tagged

monitor profile or some other tagged colour space.<p>

I think the sticking point is that "tagged and "embedded" mean all the original data is still

available but a tag is attached to the file tells a colour aware programme how to interpret

the data (you're not doing that) whereas "converted" means there are no tags, instead

some data is actually thrown away in the conversion process.<p>

But as I said in the post above, the reason that your conversion to your monitor profile

looks identical to your photoshop doc is because essentially it is identical as far as your

monitor can show you. This implies that your monitor is capable of displaying a slightly

larger colour space than sRGB which seems plausable but that info would be useful to

know to test my hypothesis.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now



×
×
  • Create New...