Photoshop: Images are different on the web

Well, yesterday, I was trying to post the image of my latest painting for the web and couldn't figure out why the image was so saturated. I tried to get the correct color and couldn't. Did some more research about it this morning and learned something about Photoshop and color proofs.

When creating your image for photoshop, the standard method to create the image for the web is to use the "Save for Web & Device". This runs the old ImageReady program. However, there are times that the image is so over-saturated. I thought that it was due to the web colors. Not true. It's due to the color profiles that are stored with the image file.

To see the image as accurately as possible, use the menu option View->Proof Setup and you will see different choices. When creating the images for the web, you should choose: Monitor RGB. This shows how the images will look on your monitor (depending how well the color is calibrated on your monitor). If you select the default, Working CYMK, this will show you more accurately how the printing of the image will come out.

As we see in my current painting, there is a large difference between the Working CMYK (actual image) and the Monitor RGB (Web Version). The image on the left is a fairly true representation of the painting. The image on the right was the “Save to Web” version of it. It’s too highly saturated and there is too much red in it. So, by setting my view settings to “Monitor RGB”, I was able to correct the image in Photoshop to the true colors. When I posted it on the web, it was showing the colors that I expected.

Recommendation: When creating images for the web, immediately set the View->Proof Setup to Monitor RGB. Then make your adjustments to the image. When saving the image using “Save to Web”, you should see the same image as you see in Photoshop.

Note: Using this option will look good for most monitors. However, not all of the monitors. It is highly recommended that you set the color settings correctly for your monitor before creating these images. This is a simple procedure by going to Control Panel->Color Management and following the rules to calibrate your monitor. Gives the best chance of creating the correct looking image.

If you are used to using the Adobe Gamma program to calibrate your monitor, it is no longer available for Windows 7 or Vista.