my name is kill.

As a serious modern photographer I am obsessed with controlling every aspect of color management - from camera to monitor to print. With careful attention to the details I can recreate the exact colors that I saw through the viewfinder or, accurately print specially brewed color and contrast tweaks. Ahh…perfection!

It would be nice if portraying your images on the web could be that precise. But, alas, it is not so. As with most objects for mass consumption the final quality is out of your hands. So. What do you do for all of those millions of people ( real or imaginary ) who will want to view your beautiful creations online? Online portfolios of work are essential this day and age and you will be judged on the way they look, despite the known issues of on-screen viewing.

Is there any hope for our poor images as they go out to be viewed on monitors with stock calibration, laptops in direct sunlight, fluorescent-lit cubicles, Wii’s, PS3’s and cell phones?

Maybe. We can hope.

As I see it, there are two approaches that can help:

Approach #1: Denial.

This approach is simple and effective.

Step 1. Post images to your website (or flickr, smugmug, etc.)

Step 2. Walk away.

DO NOT view your images with a web browser (not even your own). Doing so will utterly ruin this approach and immediately force you into approach #2!

Approach #2. Process your images for the web.

A few extra steps will give your images the best shot at accurate web rendering. There are a few common issues that I come across when rendering my images on the web. I will now describe my personal methods for preparing images for the web.

Step 1. Initial edits.

Prepare your image from RAW (basic contrast, color correction, and input sharpening). Open in Photoshop as an 8-bit image with sRGB as your color workspace.

Step 2. Resize.

Since I am working on a copy of the image (you always work on copies too, right?) I resize my images right away to enhance editing speed and give me a clear view of the image details at the target size. Typically, I stick to the standard resize method in Photoshop: Image > Image Size - set resolution to 72 pixels/inch, set the target width or height in pixels, and choose Bicubic Sharper in the Resample Image drop-down menu. The resized image will usually need a bit of sharpening at this point to bring out the little details that are lost in the resize. Something like Unsharp Mask (Amount:30%, Radius 0.5 pixels, Threshold:0, will get you close)

Step 3. Preview your image without color management.

Selecting View > Proof Setup > Monitor RGB. You should immediately see some changes to your image on screen. Generally the image contrast and color saturation increase (which is pretty much the opposite of what happens when you are printing an image!)

Step 4. Image tweaks.

The color boost is typically welcome and does not require extra tweaking. The image contrast, however, is usually a bit too much for my taste…pushing shadows into absolute darkness. I correct this with a small reverse-S curves tweak (but most of you will have your own methods for reducing contrast / lightening shadows).

Step 5. Save for the web.

The goal here is to balance quality and size. In Photoshop you can get a live preview of your effects before you save. Select File > Save for Web & Devices… I typically start with the following settings: JPEG, Very High or Quality 80. For 90% of my images that works perfect and yields a decent sized portfolio image (less than 100kb) with no perceivable different in image quality.

Step 6. Upload and view (if you dare!)

Hope this helps!

Josh