Problem

Have you ever noticed that your images when viewed on a web browser appear to look less colorful than they do in Adobe Photoshop. I learned the hard way and this article will help you avoid the mistake I made.

When I first started building my website, I had to process hundreds of photos in Photoshop. This meant going through my usual digital workflow - cropping, adjusting levels, curve, colors, formatting size and resolution and finally sharpening. At the time, I didn't see any harm in leaving each image assigned to Adobe RGB. When I got to the point where I was viewing my page of a web browser, I was puzzled why the images didn't look as vibrant as they did in Adobe Photoshop.

Solution

I found out that I wasn't the only one having this problem. I downloaded thumbnails from several different photography sites and viewed them on Adobe Photoshop. I was pleased to find out that the majority of them looked more vibrant than they did on the web browser. Then I studied the images that looked the same when viewed on a web browser and Adobe Photoshop. All of these images had one thing in common - they were assigned to an sRG profile.

Here is how you convert images from Adobe RGB to sRGB in Adobe Photoshop. Do this before you start to digitally enhance your image.

1. From the menu bar, select Image>Mode>Convert to Profile. In the Assign Profile dialog box, select sRGB IEC61966-2.1 from the drop down menu.

You won't see any color change occur because you are converting the profile. If you used the Image>Mode> Assign Profile instead, you would see a color difference.

2. Next, apply your digital workflow such as cropping, adjusting levels, curve, colors, etc.

3. You can preview how your image will appear in a web browser by choosing File>Save for Web. You should not see any difference between the image in the Save for Web dialog box and the image in the Photoshop workspace. Good luck!