Photoshop to web color shift frustrations

[Inge Schepers]

Hi everyone,

For some reason, I can't get the colors of my photos right when I edit them in Photoshop and save them as JPG. I have read several articles on the web about this subject, and the general consensus seems to be that you need to set the color space to sRGB in Photoshop before saving the image. I did so, but the colors still do not look the way they did in Photoshop. The attached photo is an example. The grass looks much greener and the insect looks more reddish brown in Photoshop. After saving as a JPG, the colors look faded and slightly more brownish.

Since many people here have a lot of experience with Photoshop and saving for the web, is there someone who can explain to me what I am doing wrong, and how I could get the colors in the web browser look more like the colors in Photoshop? I really hope that I can get this right one day, because I sometimes hate how my photos look in a web browser...

Thanks in advance!

Inge

[Robert O'Toole]

This is a weevil right, I like the image, good job on the comp.

What is the quality setting you are using, 1-12 or 01-100 in PS? Too much compression can really cause the colors to look muddy. Usually I add an s-curve and maybe add a tiny bit of saturation as an action for the images for the web, otherwise they dont resemble the origional.

Robert

[Inge Schepers]

Hi Robert,

That also solves the puzzle of what on earth this "thing" was: a weevil. :) I hadn't been able to figure out yet what it was! I just happened to come across it when looking for little bugs in the grass. I'm glad you like it.

I usually save my image with the highest possible quality setting in Photoshop. I did have to compress it a bit because the highest possible quality made the file too large to post it here. However, there is no noticible difference in color between the highest quality setting and this one (the slider was set to 8, High).

Inge

[Mike Milicia]

For some reason, I can't get the colors of my photos right when I edit them in Photoshop and save them as JPG. I have read several articles on the web about this subject, and the general consensus seems to be that you need to set the color space to sRGB in Photoshop before saving the image.

Your reference to "setting the color space to sRGB" prompts me to ask if you are using "Convert to Profile" or "Assign Profile"? You want to make sure that you are Converting the image to sRGB rather than just assigning sRGB as the profile.

[Robert O'Toole]

Your reference to "setting the color space to sRGB" prompts me to ask if you are using "Convert to Profile" or "Assign Profile"? You want to make sure that you are Converting the image to sRGB rather than just assigning sRGB as the profile.


Good idea Mike, but the file is converted and tagged properly, I downloaded and checked Inge's image before I responded :)

Robert

[Mike Milicia]

Good idea Mike, but the file is converted and tagged properly, I downloaded and checked Inge's image before I responded :)

Robert

Hi Robert,
I understand how to check if a file is tagged with the proper profile but I don't know how to tell if the data was converted
or the tag was simply assigned? Is there some metadata that will tell you this? Or am I missing something entirely?
Thanks for your help.

[Robert O'Toole]

Nothing special.
Usually I look for the # symbol on the PS info bar to indicate that the doc is untagged. Then I check the tag. Then I reconverted and there was no change in values.

To make sure the image isnt mistagged you can always reconvert. When you are dealing with sRGB you can always reconvert and not lose any information since you are going down in the gamut chain and not up to a larger space. If we were talking about checking for Adobe RGB this wouldnt work since the file could be damaged already. I dont know of anyway to actually graph and measure the values to find out what colorspace the image actually is although I am sure it is possible.

Robert

[Robert Amoruso]

This is a weevil right, I like the image, good job on the comp.

What is the quality setting you are using, 1-12 or 01-100 in PS? Too much compression can really cause the colors to look muddy. Usually I add an s-curve and maybe add a tiny bit of saturation as an action for the images for the web, otherwise they dont resemble the origional.

Robert

Robert,

I find it interesting that you add contrast to during a Save for Web conversion. I find that if my highlights/shadows are near clipping, the sRGB conversion clips them out. Adding more contrast seems counter intuitive to me. Actually, I have added a reverse s-curve to some images to negate this affect. Saturation I have not noticed a big need to do that - possibly and as Artie always accuses me off - I have a tendency to over saturate to begin with.

[Robert O'Toole]

An S-curve is only to add mid range contrast, for pop or punch. An s-curve should never clip anything.

I find that when I downsize for the web the images look darker and flatter then 1400 px or full size.

My files are shot as sRGB so from the start I am on track in that sense remember, no conversion problems here. Thats reason 379 that I use sRGB :)

Robert

[Robert Amoruso]

An S-curve is only to add mid range contrast, for pop or punch. An s-curve should never clip anything.

I find that when I downsize for the web the images look darker and flatter then 1400 px or full size.

My files are shot as sRGB so from the start I am on track in that sense remember, no conversion problems here. Thats reason 379 that I use sRGB :)

Robert

Duh on the s-curve - true and I know that - not sure what I was thinking.

I forgot that you were using sRGB in camera so understand your reasoning. Since I use Adobe RGB, I need to sometimes set my levels adjustments for white point and black point lower to compensate for when I do the sRGB conversion.

The difference between you and me is I am optimizing for print and not web. But I do understand why you do it the way you do. Thanks for the clarification.

[Inge Schepers]

Hi again,

This is what I did:

I opened the RAW file using the built-in RAW converter in Photoshop. At the bottom of the RAW converter, it said "Adobe RGB 1998; 8 bit". I then used the ASSIGN workspace option to set the workspace to sRGB. I then saved the file. After reading the responses here, I also tried the CONVERT workspace option, but the effect was the same.

I just made a screen shot of the image the way it looks in Photoshop. I will add it as an attachment to this message. As you can see, the colors are much more vibrant, and there is much less visible noise in the photo. I must be doing something wrong, but I am not sure what...

Inge

[Inge Schepers]

I forgot to mention: I also tried exporting the photo from Lightroom, but that also led to the less vibrant, more brownish result.

[Robert Amoruso]

Inge,

The posted screen grab certain is more vibrant. Not sure what to tell you now. Let's see what Mr. O'Toole can come up with.

[Alfred Forns]

Inge the only thing I see from what you have listed is working in 8 bit? Should have it set to 16 bit Not saying it is causing any problems but will prevent some !!

[Inge Schepers]

I wanted to let you know that I just found some interesting information: there is a "View - Proof Setup" menu item in Photoshop. If you make sure to set this option to "Monitor RGB" AFTER converting the RAW file (or just opening your file in Photoshop), Photoshop will display the image as it will look in your web browser. In that way, you can see what the effects of Photoshop adjustments will actually be after your image has been saved for the web. This is a good thing, because this way "what you see is what you get" when saving the image for the web.

If this option is already set to "Monitor RGB" before converting the RAW file or opening your file in Photoshop, you need to switch to one of the other views and back again, for some reason. Otherwise, you will not see what the image will look like after saving for the web.

What I don't like, is that this means I will probably have to create two versions of my image: one for the web, and one for print. :( Anyway, at least I have figured out a way to actually see what I am doing to the web version of my image in Photoshop. Unfortunately, that means I will have to add saturation to some colors even though they look exactly the way I want to straight out of the box. I am adding a third version of my image, which more closely resembles the screen grab posted earlier. I used a bit of an S-cruve as well for this one, just to see if that would look even better, but you can ignore that part. As you will see, the colors are more vibrant now than they were in the first image, and resemble those in the screen grab.

If anyone knows how to get everything set up in such a way that I can use the same version of the photo for web and print, I would be very happy to hear about it. But this is already a big step forward for me, and maybe it can also help out someone else with the same problem.

Inge

[Inge Schepers]

Alfred, thanks for mentioning the 8 bit versus 16 bit part. It was not the cause of my problem, but I simply hadn't noticed that you could tell the RAW converter to create a 16 bit version of your photo. I really should start reading more about this. I've always been the "hands on" kind of person and don't start reading the manual or other resources until I run into some problems...

Inge