How To: Saving Images for Web Viewing

By Josh 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 are essential, and you will be judged on the way they look, despite the known issues of onscreen 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 Web site (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)

200803we_kill01.jpg

200803we_kill02.jpg

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!)

200803we_kill03.jpg

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!)

Josh Kill is a corporate, commercial and wedding photographer and web designer.
Example images ©Joan T. Sherwood

TrackBack

TrackBack URL for this entry:
http://www.ppmag.com/cgi-bin/mt/mt-tb.fcgi/591

Comments (3)

>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!)

You can't turn off color management in Photoshop. That's a soft proof showing you what that image would look like in a non ICC aware application on YOUR machine but not anyone else's machine (Monitor RGB uses YOUR display profile to make this soft proof).

Unless you use an ICC aware Web Browser (Safari, the beta of FireFox), what you see in this PS soft proof will be different from what everyone else see's. IF the soft proof seen here isn't used AND the user and others are working with an ICC aware web browser, then they will see the same color appearance on all machines just as displayed in Photoshop.

So, there's no No Color management in Photoshop and without an ICC aware browser, everyone sees the same numbers differently,

Thanks for pointing that out Rodney!

That is a much more thorough explanation that rounds off the article well.

The method I have outlined is the common method I use that gives me the best estimation of what the common non-color-correct users will see. In theory, your're right that everyone's monitors will display colors differently. However, looking over the shoulders of many of my clients as they view my images online, I have found that this method does a surprising job of guesstimating my end-viewers' monitor setups.

Hopefully as more browsers are released that are profile-aware (and people actually use them in sufficient number) we can say goodbye to this craziness.


DISCLAIMER: This method is an estimation, not an exact science. As with everything on the web...try it out...if it works for you, use it. If it doesn't, feel free to toss it!

Josh


Correct me if I'm wrong, but I've come to understand that pixelx/inch is for exactly that: inches, not pixels. changing the resolution (PPI) only affects image size when using inches, but when sizing an image for web resolution, PPI doesn't matter one bit. A lot of people are don't believe me at first, but then they try it. If take an image that is 600x800 pixels, at 300 PPI (Pixels/inch), then resize it to 72 PPI, and re-type in the 600x800 (because it automatically thinks you're resizing for print, and maintains the inch dimensions), notice how the original inch dimensions are different, but if you look at the top where it usually says "Pixel Dimensions: [size file will be if you hit OK] (was [original size] )", the file has not change one bit. So as far as I know, Pixel dimensions are the only thing that matters for displaying images online.

About

This page contains a single entry from the blog posted on March 1, 2008 5:49 AM.

The previous post in this blog was Sony Alpha DSLR-A700.

The next post in this blog is Tutorial: Lighting for Impact.

Many more can be found on the main index page or by looking through the archives.


 
Powered by
Movable Type 5.2.7