Shooting Photographs for the Web

Body: 

I vividly remember seeing an exhibit of Andreas Gursky's photos at the Chicago Museum of Contemporary Art. His prints were enormous, often more than 10 feet wide, giving the photos impressive scale and detail. Excited to relive the museum experience, I bought a coffee table book of his work. Unfortunately, at the smaller print size, the photos were lifeless and fuzzy.

When once-majestic landscape photos or detailed portraits appear on the Web, they're often transformed into sad reproductions of themselves, victims of the medium's necessary reductions in size and resolution. It's even worse if the photo is on a mobile device.

But all is not lost. Although the resolution of computer monitors and cell phone screens won't rival a photographic print anytime soon, you can take steps to compose, shoot, and process your photos to get the very best results online.

The Small Screen Differences
To understand how to shoot for small screens, you must first understand the fundamental technological and behavioral differences between shooting for print and shooting for small screens. In this context, "small screen" encompasses everything from the largest image size viewed on Flicker to a standard Web gallery image to a photo portfolio viewed on an iPhone.

To begin with, photos online contain far fewer pixels than their printed brethren. On average, screen resolution is one-third that of a corresponding print of the same size. Fewer pixels mean fewer points of information to create smooth lines, fine detail, and subtle shadings.

Figure 1 shows the different resolutions for common sizes of photos online. Using an 11"x14" print for scale, it quickly becomes apparent that even a high-quality 24" desktop monitor contains significantly less visual information than even a medium-sized print.

Figure 1. Image sizes compared.

For numbers-oriented readers, here's that information in tabular form:

Image Size Pixel Amount
11"x14" print (landscape orientation) at 300 pixels per inch 3300x 4200 pixels
24" computer monitor 1920x1200 pixels
Typical Web gallery image 800x600 pixels
iPhone 480x320 pixels
Facebook/Twitter profile picture 48x48 pixels

Further complicating the issue is the way most people view photos online. According to the Stanford Poynter eye-tracking study, "sixty-four percent of photos were looked at on average about one-and-a-quarter second." This brief glimpse at a photo lets a viewer quickly interpret a photo's content, but it's insufficient for appreciating the subtlety and nuance in well-crafted photographs. Compound this with the tendency to quickly click through to the next image and it's clear that we appreciate photos more superficially online than we do when admiring a framed photo on a friend's wall or in an art gallery.

Don't Stop at One Shot
Given these challenges, how can you make your photos more successful online? The first strategy for success is to consider the end use of the photo before you press the shutter. If you don't know, or if the photo may appear in print and on the Web, take multiple compositions of the scene. Some should capture the full detail and sweep of the scene (for online), while other shots should highlight smaller details (which will show up best in print). Packaging both widely and tightly composed views within a Web gallery is a great way to share scale and detail at the same time.

Crop Tightly
A second strategy is to crop tightly, eliminating superfluous or less-important details (Figure 2). This is good photographic practice in general, but it's critical online. While it's possible to crop your photo more tightly in an image-editing application such as Adobe Photoshop, getting in the habit of cropping tightly in-camera will make you a more successful photographer and your photos more spectacular both in print and online.

Figure 2. An example of a tight crop.

Compose Simply
One of the benefits of cropping tightly is that your photos become simpler, cleaner, and less cluttered. Another way to achieve those same goals is to carefully consider what's behind your subject. Is it heavily detailed, like a busy street or tree? Perhaps by adjusting your camera angle slightly you can replace the busy background with a bright blue sky, a colorful wall, or, as seen in Figure 3, a mono-colored field.

Figure 3. This background doesn't distract.

Use a Shallow Depth Of Field
If you do include a busy background -- either because it places your subjects within their environment (a bike messenger on a busy city street, for example) or because you have limited vantages from which to shoot -- set your camera to aperture-priority mode, photograph at your widest aperture (smallest f-stop number), and use a longer lens. This helps to blur the background and make your subject stand out (Figure 4).

Figure 4. The plant in the foreground really pops.

To get the full effect, you need a professional-quality lens for your camera with a maximum aperture of f2.0 or f2.8. However, these excellent lenses tend to be very expensive. If they're beyond your means, a great alternative is a fixed lens in the 50mm range with a maximum aperture of f1.8. It's one of the most versatile, yet least expensive, lenses on the market and is great for isolating your subject from the background.

Light Subject, Dark Background
Another way to simplify a busy background is to find a location where your subject is illuminated and the background is in shadow or less heavily lit. This contrast between light and dark gives your subject more prominence within the photo and provides a sense of depth and three-dimensionality often missing when photos are evenly illuminated (Figure 5).

Figure 5. Because it's dark, the background all but disappears.

I like to find an isolated pool of light and position myself to photograph my subject in the light, against the dark background. You can often find these lighting situations on city street corners and in areas where the sun is partially blocked by buildings or broad awnings.

Boost Contrast
Once you've completed your shoot and downloaded the pictures to your computer, boost the contrast within your photos to make their contours and shadows more pronounced.

While you can use the Contrast slider in Lightroom or Photoshop, that's not the best choice for every image because it increases contrast through the middle tones. When your subject is lighter or darker than middle gray (for example, very light or dark skin tones, night photos, snowy scenes, or photos taken in dark shadows), the Contrast slider makes your pictures look a lot worse (Figure 6).

Figure 6. In this photo, the Contrast slider causes the highlights and shadows to lose detail.

For better control of the contrast in all your images, use the Tone Curve in Adobe Lightroom and Adobe Camera Raw (Figure 7). In Lightroom's Develop module, select the Targeted Adjustment tool next to the Tone Curve, then click on the lighter areas of your subject and drag the cursor upward to lighten those tones. Click and drag the darker areas of your subject toward the bottom of the screen to darken them. This maximizes contrast on your subject and is more effective than the Contrast slider.

Figure 7. The Tone Curve in Lightroom's Develop module.

To perform a similar correction in Photoshop CS4, create a new Curves layer from the Create New Fill Or Adjustment layer at the base of the Layers panel. Click on the On-image adjustment tool in the upper-left corner of the Curves dialog (Figure 8), then click and drag upward to lighten those tones in the image. Click and drag the shadowed areas toward the bottom of the screen to darken them. Avoid placing more than two to three points on the Curve -- sharp bends in the curve will cause abrupt, unnatural looking transitions in your photo.

Figure 8. Photoshop's Curves dialog.

Figure 9 shows you the happy result of using this method -- a big improvement over Figure 6!

Figure 9. Photoshop's On-image adjustment tool gives you more precise contrast control.

Boost Vibrance and Saturation
You can increase the richness of colors in your photos using the Vibrance and Saturation sliders in Lightroom, Adobe Camera Raw, and Photoshop CS4 (Figure 10). The Vibrance slider increases the saturation of desaturated colors, making them appear more lifelike, while the Saturation slider boosts the saturation of all colors in the image. Too much Saturation makes photos appear garish and artificial. For that reason, I find a ratio of three parts Vibrance to one part Saturation works well for most images.

Figure 10. When used with restraint, the Vibrance and Saturation sliders make your photos richer.

Remove Your Subject From The Background
If you want to use a photo at a very small size (your Twitter profile, for example), but it's too busy to be effective at such a small size, consider eliminating the background. There are many ways to do so, including the Lasso tool, Color Range, and any number of masking techniques. If you regularly remove subjects from photos' backgrounds, I recommend that you buy a plug-in, such as Vertus' Fluid Mask, to make the process faster and far less painful.

Figure 11. Without replacing most of the background with white, this image would be hard to make out at a small size.

The continued success of the iPhone and other Web-enabled mobile devices points toward a future where the majority of images will be viewed on small screens. By starting to shoot for the small screen today, you ensure that your photographic vision won't be lost when friends, family, and clients view your photos online.

Liked This? Read These!

The makers of the Fanta soft drink are running a multi-part ad campaign that uses an interesting effect that's very easy to achieve: Read More
TypeTalk is a regular blog on typography. Post your questions and comments by clicking on the Comments icon above. If Ilene answers your question in the blog, you'll receive one Official... Read More
I have been using the Hue and Saturation Adjustment tools that Photoshop provides for a long time. Usually I am just making overall image adjustments, but from time-to-time there is a specific area... Read More
Photographs are great for print projects and Web sites, but sometimes you want something a little different. Changing a photo into a duotone makes it look more like an illustration, and a duotone's... Read More