greglyon Posted September 4, 2005 Share Posted September 4, 2005 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></div> Link to comment Share on other sites More sharing options...
byronlawrence Posted September 4, 2005 Share Posted September 4, 2005 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 More sharing options...
greglyon Posted September 4, 2005 Author Share Posted September 4, 2005 Thanks for the quick response, Byron. Unfortunately, that is exactly what I do too, and did for these images. I'd swear that it 'used to work' fine for me too. Perhaps I've messed up some other PS setting somehow... Link to comment Share on other sites More sharing options...
rich815 Posted September 4, 2005 Share Posted September 4, 2005 In PS (before going to Save for Web) do a View, Proof Setup, Monitor RGB. It will now look dull. Then adjust colors/saturation as you like, then do Save for Web. Link to comment Share on other sites More sharing options...
albert lui Posted September 4, 2005 Share Posted September 4, 2005 In Step 4, did you select "Standard Windows Color"? Click on the button above the preview for setting that. Link to comment Share on other sites More sharing options...
greglyon Posted September 4, 2005 Author Share Posted September 4, 2005 <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 More sharing options...
elliot_n Posted September 4, 2005 Share Posted September 4, 2005 Instead of converting from Adobe RGB to sRGB, try converting to your monitor profile. Link to comment Share on other sites More sharing options...
WJT Posted September 4, 2005 Share Posted September 4, 2005 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 More sharing options...
greglyon Posted September 4, 2005 Author Share Posted September 4, 2005 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 More sharing options...
rich815 Posted September 4, 2005 Share Posted September 4, 2005 Why do you feel my solution is such a problem? Works for me. Have you tried it? What is wrong with tweakiung the image once you have seen it in the Monitor profile? If you want it to look nice on the web its what you have to do. Link to comment Share on other sites More sharing options...
greglyon Posted September 5, 2005 Author Share Posted September 5, 2005 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 More sharing options...
rich815 Posted September 5, 2005 Share Posted September 5, 2005 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 More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 '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 More sharing options...
eric_perlberg Posted September 5, 2005 Share Posted September 5, 2005 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 More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 '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 More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 (I was really hoping that Greg would try it (converting to monitor profile) to see if his results mirrored mine.) Link to comment Share on other sites More sharing options...
eric_perlberg Posted September 5, 2005 Share Posted September 5, 2005 <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 More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 '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 More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 Let me try and post my own screen-grabbed example... on the left. the save for web jpeg as displayed in Safari, on the right the aRGB-converted-to-sRGB PSD as displayed in Photoshop:<div></div> Link to comment Share on other sites More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 And here's what happens if I convert to my monitor profile instead of sRGB... The jpeg in Safari (left) now matches the image in Photoshop (right):<div></div> Link to comment Share on other sites More sharing options...
eric_perlberg Posted September 5, 2005 Share Posted September 5, 2005 Hi Eliot, Is the saved for web jpeg in Safari in the screen dump above the one that's been converted to your monitor profile or is it in sRGB? Link to comment Share on other sites More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 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 More sharing options...
eric_perlberg Posted September 5, 2005 Share Posted September 5, 2005 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 More sharing options...
elliot_n Posted September 5, 2005 Share Posted September 5, 2005 '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 More sharing options...
eric_perlberg Posted September 5, 2005 Share Posted September 5, 2005 <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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now