Posting Photos on the Web

Background

So you have a new dSLR camera and you've been taking some great photos.  You want to share them with others and you've found an online photo hosting service where you've uploaded some photos but you notice that after they have been uploaded, they look dull or washed out when they are viewed on the photo hosting web site.  Where did you go wrong?  They looked great until you uploaded them to the web!  In this article, I discuss a common mistake that can cause color problems when uploading photos to photo sharing web sites.

Your Camera's Color Space

If you are not familiar with color spaces or need a refresher as to why your camera may offer more than one color space, you may want to check out this article before going further.  If your camera is set (via the menu options on the camera) to sRGB color space or the camera doesn't offer any color space selection, you should have no problem just uploading the original files to photo sharing web sites since sRGB is a reasonable color space for web viewing.  Web browsers generally are not color management aware, which means they can only display the raw image "as is" on screen.  Since sRGB is a reasonable match for most monitors, images coded in sRGB color space should look fine.

You've read about the virtues of larger color spaces like Adobe RGB, however, and you've set your camera to Adobe RGB color space via the camera menu option.  When posting images on a photo sharing web site, here's where the trouble starts!  If you upload an image that has been captured in Adobe RGB color space (or converted to Adobe RGB via your raw conversion tool of choice), the image on the photo sharing web site will be in Adobe RGB color space on the web site.  When someone goes to that site and opens the image with their web browser, they'll be looking at an Adobe RGB image on a screen that is best suited for an sRGB image.  This is due to the fact that the web browser ignores the color space tag in the image since it is not color management aware: it simply "dumps" the image onto the screen.  When this happens, colors can look dull, washed out, and some colors can appear shifted or just wrong. 

Adobe RGB	sRGB

Take a look at the photos above.  The one on the left is what the photo would look like if you had shot the flower in Adobe RGB and simply uploaded that file to a web page or photo sharing site.  The photo on the right is the same photograph converted to sRGB color space prior to uploading the image.  As you can see, the colors look quite dull and lifeless in the Adobe RGB version.  Again, this is due  simply to a mismatch in how your monitor handles color and how the color was saved in the image.  It is not an indication that there is something wrong with Adobe RGB color space!  The fact that your monitor is better suited (closer to) sRGB is what makes the sRGB version look closer to correct.

A Time and a Place for Adobe RGB

Adobe RGB has a larger color gamut (range of colors) and is therefore well suited for reproducing photographs in professional photographic tools, particularly when printing since printers can actually reproduce a wider range of colors than your monitor.  If you were placing photos on a web site for professional photographers to download and edit or print on their computer rather than just displaying the images on the web, it would be appropriate to use Adobe RGB.  So Adobe RGB is appropriate when you want people to be able to download and reproduce your photos offline.  This ensures that you get the larger color gamut of Adobe RGB and most professionals who intend to download and use the images on their computer will realize that the photos may not look "up to par" when just viewing them in a web browser.  For most applications, however, you'll want your images to be in sRGB color space so that people can just click on the photos in their web browser and get reasonable color rendition without having to download the files and pull them up in a photo editor or other color management aware application.

Converting to sRGB Prior to Uploading

While you've been happy shooting in Adobe RGB color space and you've had no problem editing your photos in your professional photo editing application or printing them from Qimage as those applications are color management aware, it would seem your use of Adobe RGB color space is now causing problems for you when you want others to view your photos on the web.  Do you need to switch back to shooting in sRGB color space to avoid this hassle?  The answer is emphatically NO!  You can keep on shooting in Adobe RGB to get the extended color capture range (that your printer can use) and simply convert those Adobe RGB images to sRGB prior to uploading them to the web.  Don't worry, this operation is simpler than it sounds!  You could always do it the hard way by opening each photo one at a time in your favorite photo editor, converting to sRGB, and resaving, but if you have a batch processing application like Qimage, you can make sRGB copies of all your Adobe RGB photos in one batch processing step.  In Qimage, here are the steps to create sRGB copies of a batch of Adobe RGB photos:

1. Add Adobe RGB images to the queue by selecting/dragging thumbnails.

2. Right click in the queue or on the preview page and select "Convert Images".

3. Under "Save Options", select the file type for the new files (JPG, TIF, etc.)

4. Check "Perform a profile to profile (ICC) conversion".

5. Delete any text in the "From" box: the word <input> should appear in the box.

6. Click the "...." button next to the "To" box and then click "Utility Profiles".

7. Select "Adobe RGB".

8. Click "OK" and sRGB copies of all images in the queue will be created.

If you know you want downsampled JPEG's for the web, here's an even easier way:

1. Add Adobe RGB images to the queue by selecting/dragging thumbnails.

2. Right click on queue/preview page and select "Create Email/Web Copies".

3. Make sure "Convert to sRGB color space" is checked.

4. Select resolution and JPEG quality and click "Go".

5. Unless you specify an output folder, sRGB copies will be in a {Q}e-mail subfolder.

Summary

Be aware that web posted photos can look dull or display with inaccurate color if you are shooting in (or converting your photos to) Adobe RGB color space and then uploading the Adobe RGB images directly to the web.  To solve this problem, simply convert images to sRGB color space prior to uploading them to your web page or photo sharing site.  My own  Qimage software offers batch conversion to create sRGB copies from multiple Adobe RGB images in one shot (see above), making shooting in Adobe RGB and uploading to the web less time consuming.  By shooting in Adobe RGB, you can reproduce a wider range of colors for printing photographs and still convert to sRGB when needed for web display.

Mike Chaney