How to view pictures the way it is on the web in Photoshop?

Color Change - Color Chart

Have you encountered a color change problem when you design a picture or an image in Photoshop and you “save for web it?” Sometimes the problem may not be so pronounced, but there are times that the change in color will be so obvious that meticulous Graphic Designers would find it annoyingly troublesome. This color change I’m talking about involves unintended reduction of color saturation and gamma setting for some unknown reason. While your pictures will look fine when viewed on your PC with various Picture viewing tools and apps, it will suddenly appear dreary when uploaded and viewed on the web. This problem is also persistent as no matter how hard you try to correct it in Photoshop, your picture just keeps on appearing bleak on the web. This is one heck of a save for web color change mystery.

Below is an example:

House 1 House 2

At first I thought that the degrading of the graphic has something to do with the upload, I thought that maybe the host’s uploader reduces the quality of pictures on purpose so to decrease file size and thereby save space, but I tried a direct FTP upload and the result is still the same. I wondered and thought that maybe it has something to do with the configuration of my monitor, but then I perish the thought after having realized that I am using the same monitor and the same standard “default” configuration to view the same picture on my PC and on my web browser. It seem to be not OS-related either since I am using the same OS to view the picture on the PC and on the web. I tried a different PC and there still has that color difference. I also checked the color profile to make sure it is correct and it is. I checked Photoshop’s configuration to see if something is messed up, but I find no fault. I tried saving the image in different formats and at optimum quality, I also tried the save for web option for the picture and yet, when you upload and view the graphic on the web, the problem is still there. It just won’t go away. Desperate to fix the problem, I consulted other Graphic Designers on the web and see what they know about this issue. Some provided what seem to be a fix, but to no avail.

The Search for the Color Change culprit

Color ChartI just got to find the root of this color change problem if I am to solve it. To determine the problem, I resorted to trial and errors and different color testing methods.

I began by saving the picture from the web into my PC. Surprisingly, it went back to being OK again, so I reuploaded it into my web site only to find out that the color change problem is back. The next thing I did is I viewed the graphic with a Picture viewing app and screen captured it. I cropped the picture from the screen captured image with Photoshop, then save and reupload it to the web. Still no good, the color change went back again. The next move involves color testing. I save the web picture into my PC and open it with Photoshop, then with another Picture viewing app, I opened the same picture and compared the images, it’s just perfectly the same. I used an eyedropper to pick the color of the picture on the web and used it to compare with the one opened in Photoshop. It yielded the same result. The colors are just perfectly the same, so it’s a big mystery why it won’t show up the way it is on the web.

Now, I tried cross browser testing. I opened them in Mozilla Firefox, IE, Chrome, and Safari. Of the four web browsers, only Apple’s Safari preserved the original color. This gave me a cue, it made me suspect that the problem is in the web browsers and not in the picture itself. But, it is not because the web browsers have been misconfigured, it’s just that different web browsers have different means of viewing pictures. At this moment, I almost gave up, thinking that since this is a web browser issue, I cannot do anything other than wait for the web browser programmers to fix the issue and make web image viewing standard. However, the persistent change of color for the save for web images can be problematic as it can confuse you when you’re editing colors since it shows differently on Photoshop. You may still think that the graphic you’re making in Photoshop is fine, only to be aghast at how terrible it actually looks like on the web. So, this problem has got to be dealt with.

Solution to the Color Change issue for Save for Web images

Until the designers of different web browsers decide to make a standard way of viewing images on the web, there is nothing we can do to fix the issue, however, the fact that this color change can confuse Graphic Designers and frustrate fussy Photographers, we have got to do something. Perhaps, we could employ a little trick that could somehow remedy the problem.

This trick is not to make Photoshop create pictures that are cross compatible with different web browsers, it is also not going to make your colors look similar on all monitors, but rather it will allow you to view pictures the way it is on the web in Photoshop. So to speak, we’re not going to make the web browsers adapt to Photoshop, but rather we’re going to make Photoshop adapt to how the web browsers view the images. This way, we can at least eliminate the confusion since it would allow Photoshop to view the images exactly the way it will come out on the web.

Step 1: Change the Color Settings

To make your Photoshop view pictures the way it appears on the web, the first thing to do is to change the color settings. This will allow you to set Color profiles. Color profiles define how Photoshop interprets the raw color data in your picture. When you save an image, Photoshop also saves this color profile along with the picture and it can change how you see the colors. This kind of precision is employed in Photography and print design, but not so much in websites. Most web browsers also ignore this except for Safari. By default, the working space for RGB is set to sRGB IEC61966-2.1. By the way, sRGB IEC61966-2.1 was created by HP (Hewlett-Packard) and Microsoft as a general purpose, standard color space for inexpensive monitors and printers. Basically, it’s a color space for the average users who knows and cares little about color accuracy or image quality. We’re going to change this color space to Monitor RGB to remove the color profile. Without the color profile, Photoshop will use your monitor’s default color work space instead, this is the same as how you view images on the web with most web browsers.

With no images open, go to Edit -> Color Settings. You can also press Shift+CTRL+K on your keyboard.

photoshop color settings

Under Working Spaces, change RGB [profile] into: Monitor RGB. You may also uncheck “Ask When Opening” as this option when enabled, notifies you whenever the embedded color profile in a newly opened image does not match the current working space. It also gives you the option to override the policy’s default mismatch behavior. When disabled, Photoshop will give you a brief heads-up that you are tossing the color profile instead.

Step 2: Change Proof Setup

The next step is to prevent Photoshop from displaying skewed colors on the non-color-profiled pictures. To do this, go to View -> Proof Setup and select Monitor RGB.

photoshop proof setup

Note that if you are on a Mac/PC and you want to see how an image is going to display on the other OS’ default gamma setting, you can come back here and test using “Windows RGB” or “Macintosh RGB.” Just be sure to switch it back later, or you could accidentally be designing with different colors.

Step 3: Make sure it does not revert back to sRGB

The last step is to ensure that Photoshop does not sneak color profiles into your images. Most web browsers as mentioned before ignores color profiles, but there are some web browsers that read them (Safari is an example), and this can make your pictures appear differently in different web browsers. That is why we have to avoid this.

To prevent this issue from happening, go to File -> Save for Web or press Alt+Shift+Ctrl+S on your keyboard when saving your picture. This will open up another panel.

photoshop save for web

In the sub panel, there is a check box for the option “Convert to sRGB.” You should uncheck this box before saving your graphic.

A Final Note on Color Change

Even with the setup we’ve done to make Photohop view pictures the way it is on the web, there are still factors that could make some color change issues happen. Of course, one factor would be your monitor, different monitors along with their settings could still change the color of images. Also, there will be noticeable color differences between old and modern monitors. Another factor perhaps is brand, Macs for example, will always display brighter colors by default.

Leave a Reply

Your email address will not be published. Required fields are marked *

FOLLOW US
OR
SUBSCRIBE
Please consider subscribing to us. This way, we can update you if there is anything new and interesting to read. Your email address will remain private and you can unsubscribe anytime.

Enter your email address:

Delivered by FeedBurner