Keeping colors true when posting to web.

03/07/2005 11:49:34 PM · #1

I've got a question. I shoot RAW in Adobe RGB, use photoshop to process to 16 bit TIFF files. When I get ready to upload to the web, I change to an 8 bit file, convert the file to sRGB, down size and then save as JPEG at whatever size a given site prefers. Sometimes, however, once I load that jpg to the web, the color is washed out - not just a little washed out - I mean washed out. One of my entries here I had to oversaturate to the point it looked ugly on my screen in order for it to show its true colors at this website.

I've started using the save to web function on photoshop, but that just gives me a preview of how bad it is going to look . . . so I go back and add color, add saturation, add warming filters, anything to get the finished product on the web to look right. Some photos seem to have more of a problem with this than others.

By the way, my original files print out with beautiful color. I have just started using a CRT and even on the CRT the colors don't look the same on the upload, although they do look better than they do on my mac laptop.

But I wish I understood what was happening - so that I could know how to get my files ready to show their proper colors without having to do this trial and error guessing.

Any suggestions anyone?

just-married

Canon EOS-10D

Canon EF 50mm f/1.8 II

03/08/2005 12:10:16 AM · #2

You can change your Proof Setup to Monitor RGB when prepping files for the web. This is under the View menu in PS. This effectively lets you see what you would see when you click Save for Web, so that you can alter and enhance knowing what the end result would be. You wouldn't want to print the file enhanced this way though; not good results.

My recommendation is to get your file print-ready, save it, then switch to Monitor RGB and optimize it for web viewing and save for web. More steps, but more consistent results.

HTH, Dawn

03/08/2005 12:11:37 AM · #3

Thanks! I'll try this!

Tamron SP AF 17-35mm f/2.8-4 Di LD Aspherical IF for Nikon

03/08/2005 12:13:45 AM · #4

Looks like it shows better when I set it to Mac RGB. . . . hum . . . I'll play more with it tomorrow when I am not so tired.

gwphoto

Canon EOS-1D Mark II

03/08/2005 12:22:41 AM · #5

Is your monitor calibrated? Web colors also don't have the gamaut that RGB or SGRB have.

Node

Nikon D300

03/08/2005 02:01:52 AM · #6

No No No....

I had the opposite problem it oversaturated my photos, this is how to fix it.
When you click the save for web, on the top right hand side there is a drop down button. Now I have to work off my memory here but I think you need to select "Don't colour manage" I'll check and edit this if need be. But one way or the other it is in that drop down menu where you can fix it.

Bear_Music

Samsung Galaxy S24 Ultra

Sony 24-70mm F4 Vario-Tessar T* FE OSS

03/08/2005 03:55:08 AM · #7

Originally posted by Gurilla:

Yes that would be my first suggestion; check that color management is set at "off". I have absolutely zero problems like this, and I've been putting images on the web for years.

Robt.

floyd

Canon EOS-5D

Canon EF 17-40mm f/4.0L USM

03/08/2005 05:03:57 AM · #8

I've been wrestling with this very problem for the last few days. I've done a lot or reading and here's the distilled version of what I've learned. If I have any of this wrong please do leap in and correct me.

Photoshop will, by default, do colour management. This means that it will use a "colour management profile" to display the colours in your image file properly. You have been using Adobe RGB as your colour profile and that's probably the best one to choose. Your image file contains colour values for each pixel. The colour profile is a translation that takes those colour values and tells the rendering software how to display it.

When you save a picture out of photoshop it will include the colour profile in the image file. If you print it then most likely your printer software will use that colour profile in order to represent the colours correctly on your printer.

However, web browsers don't take any notice of the colour profile information in your image files. Actually there are a couple of little used Mac browsers that do, but to the best of my knowledge no PC browsers will use colour profile information. This means that the browser renders the image by sending the raw, un-translated colour values straight to the screen without it being filtered through the colour profile.

What "Save for web" does in photoshop is save the file as small as possible. It can still embed a colour profile if you wish but at the top right of the image is a menu button where you can choose which colour profile to use to display the output image. This doesn't affect the colour profile that goes in the file (I don't think). It just changes which profile will be used to display it within the Save For Web window.

Ok so that's what's going on but the real question is - how do we make our images look right on the web. Well as usual the answer is "it depends".

If you are producing image files ONLY for the web (ie never printing them) then you could simply turn off colour management in photoshop (Edit -> Color Settings... then choose "Colour Management Off" at the top). This will stop Photoshop using the colour profiles at all. You will probably get warnings when you open files that contain a colour profile, though. If you choose "Convert document colours to the working space" it will convert the colour values in the file so that they look right without colour management. After that your Save For Web images should look the same as the ones you've been working on in photoshop. I have no idea what they'll look like if you print them, though.

If, however, you are planning to print some or all of your files as well as exporting them for the web then you should consider continuing to use colour management. Adobe RGB is a good choice of colour profile for a range of reasons that are outside the scope of this reply. This means, though, that you should work on your file in Adobe colours up to the point where you want to export for the web. At that point you need to "soft proof" your image by choosing View -> Proof Setup -> Monitor RGB in the menu. This will make that one image window render the colours the same way as a web browser (ie not using the colour profile). At that point you need to add layers to make the image look the way you wanted before doing the "Save For Web". It's a pain but it's the most "correct" way to do it that I'm aware of. I found that a small hue shift (between -2 and +4)and a reasonably large saturation bump (between 0 and +40) were enough to make the exported image look about right. If you name your new layer something like "save for web colours" and save the files as PSDs then you'll know what you were doing when you next come back to the file.

So that's what I've learned. I would LOVE it if someone can tell me a better way of working than this. Ideally it would be nice to have a simple conversion that takes an Adobe RGB file and turns it into a non colour managed file and modifies the colour values in the file to match the original. Even better - why not build this process into the "Save For Web" function? It's possible, also, that ImageReady is better at this part of the process but I've not experimented with that yet.

Again, any comments or corrections to this are more greatfully received.

John