After an image has been sized to the proper dimensions, it should be sharpened. Sharpening is a process that enhances the contrast between light and dark areas of an image. Ironically sharpening is done in Photoshop through a filter called Unsharp Mask. Starting with Photoshop CS3 there is also the Smart Sharpen filter which provides more options for the sharpening process.

For this article I’ll use Unsharp Mask. The first step is to view your image at 100% magnification. You can select the View menu and then Actual Pixels. Then scroll the image around until you can see a good location to evaluate your sharpening settings. You will not be able to properly review the results of sharpening unless you are viewing the image at full size (actual pixels).

Now select the Filter menu, then Sharpen, then Unsharp Mask.

Adobe Photoshop CS3 Unsharp Mask Dialog

For a good explanation of why it is called Unsharp Mask, see the Wikipedia article on Unsharp Mask. The article also explains the three sliders: Amount, Radius and Threshold.

Each image is going to be different, and an image sized for the web will not require much in terms of Amount and Radius. The Amount slider changes how much sharpening is applied. The Radius slider changes how wide the sharpening effect becomes. Increase the Threshold slider to make sharpening work on the areas of the image where contrast is greatest.

Start by having Amount around 50 and Radius around .3, and Threshold at zero. Use the Preview checkbox to see what happens before and after the change. Then adjust Amount way up to 200 and run the Preview checkbox a few times. The change in the image is very pronounced. I call this popping. You want the image to pop a little, but not too much. Play around with the Amount and Radius until it pops how you like. Of course this is subjective, so do what works for you.

Conclusion

Determine what size you want your image. Size it for that specific use. Sharpen it appropriately. Create an IMG tag that works for that image.

Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 3) - Proper Resizing

Digital Photography photoshop, sharpening, web

Lately I’ve been wanting to move away from doing studio head shots. They work and have their place, but a nice environmental portrait I feel has more interest.

So what is an environmental portrait? It’s any photo of a person taken in their environment. A studio could be considered an environment, but it’s not the subject’s environment, it’s the photographers. The best environmental portraits are as much about the environment as they are about the subject. They work together to tell a story better than just a picture of the person.

My work for The Builders Journal has expanded my skill set in this respect. While the subjects are the primary focus of the image, the background is also very important.

    

The subjects above are Logan’s Hammer, Mittendorf Quality Construction and JD Bergevin Homes.

The same techniques can be applied to business portraits or head shots to make them more interesting.

  

The subjects above are David Gregory of DSG 4 Design and Heather Jellerson of Calluna’s Gardens.

Of course in all cases getting the lighting right is one of the biggest challenges. For David’s shot above there was a large bank of windows just in front of him and it was a bright but overcast day. I only had to add a little light to camera right and bring up the background to a suitable level. I had studio strobes already on location for the shoot we were doing, so it was pretty quick to get the levels correct.

Heather’s portrait didn’t go quite as I had planned, but quick repositioning saved the day. We went to the Bellevue Botanical Gardens on a partly sunny/partly overcast afternoon. I planned to position her in the shade if the sun was out.

I brought along two speedlights (Canon 580EX), one for on the camera to provide a nice catch light in the eye, and the other on a light stand to add some directional light. I changed the batteries in both my speedlights before the session so I wouldn’t have to worry about them.

When we got to the spot I wanted to set up I turned on my speedlights and found they were both dead. The rechargeable batteries I had just put in had apparently sat around too long and at least one of the batteries in each set had lost it’s charge, rendering them with not enough power. So now I had no supplemental lighting to work with.

After a test shot I saw that the shadows from our current location were not flattering. So we moved into full shade and I had her face towards the sun hidden behind the clouds. Using my 200mm lens and a small aperture I was able to nicely blur the background so Heather remains the focal point of the image.

Digital Photography, Recent Work people, portrait

To avoid relying on a browser to size an image, it should be done for a specific use. Taking an image that has 4000 pixels in width to having just 600 or less is a drastic reduction and there are several things to consider.

How big do you want it

The first thing to know is the final size for the image. Let’s use 600 pixels wide for our examples. This is not a tiny image, but it is not large either.

Adobe Photoshop is the tool of choice for most photographers, although Adobe Lightroom has the features people use most and very little of the complexity and has been welcomed by professionals. In Lightroom you can crop an image to specific dimensions or export an image and size the image during the export, but you do not have the level of control that Photoshop allows. For this example I’ll use Photoshop CS3.

Image Size in Photoshop

Photoshop CS3 Image Size Dialog (click to see larger)

The above dialog is available in Photoshop by going to the Image menu and selecting Image Size. Make sure there is a check in the Constrain Proportions box to ensure that the image doesn’t get out of proportion. Enter the Width or Height into the appropriate box and the other will automatically be updated.

The Resample Image dropdown at the bottom has several choices. The most often used choice is Bicubic Sharper. This will retain some of the sharpness in the image and do a great job reducing the size of the image. The second choice would be Bicubic if you happen to have an image with subtle tonal variations across a broad part of the image, like in a picture of a sunset. Using Bicubic will retain as much of the smooth tonal variations as possible.

Now that you have the right size, make sure and bring back some of the lost detail by sharpening your image.

Results

The first image below started out over 4300 pixels wide. For comparison the monitor I use to edit my photos is set for 1280×1024 resolution. So for me to view the entire image on my computer screen I have to reduce the image to 25% of its original size. For displaying on the web, even 1280 pixels wide is pretty big. From what I have seen recently 1280×1024 is becoming the default monitor resolution, but you don’t want to actually try displaying images at that size as they are too large to fit in a browser window with anything else.

The image was reduced in Photoshop to 2000 pixels wide and then sharpened appropriately for that size. To display it in the browser I used an <IMG> tag and told it to display the image at 600 pixels wide. This forces the browser to resize the image for display in this page.

2000 pixels forced to 600 pixels by the browser

The image below started from the same original file and was resized in Photoshop to be exactly 600 pixels wide and then sharpened. The image is displayed in this page using an <IMG> tag again, with the width set to 600 pixels. In this case the browser doesn’t have to resize the image, it just displays it exactly as it was saved.

600 pixels displayed full size

The differences for this image show up in the roof tile patterns, with the upper image showing some moire patterns from the browser resizng the image.

Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web

Images are displayed in a web page using an <img> tag. Attributes added to the tag tell the web browser where to find the image, and how wide and tall it should be displayed. One of the worst things to do is to use the width and height of an IMG tag to force the image to a new size.

Resizing using smaller Width and Height

The image above is actually 630 x 420 pixels, but using the IMG tag Width attribute I made the browser resize the image to 250 pixels wide.

The IMG tag used to display the image above looks like this:
<img src=… width=250>

Using this method forces the browser to reduce the size of the image before it is displayed. This will give you very different results with each browser. In this image the diagonal lines created by the top and bottom of the cabinetry have some serious jagged artifacts. The rungs on the stools suffer too. The image has also lost some sharpness. Compare it to the original image here: Remodeled Kitchen. By leaving off the Height attribute the browser will size the image proportionally.

That is not really the worst thing you can do. This is.

Resizing using larger Width

The image above uses a width of 800 and a height of 250 to stretch the image far wider than it should be, resulting in distorted proportions. Relying on the browser to size an image is not the best option.

The IMG tag used to display the image above looks like this:
<img src=… width=800 height=250>

This time the width and height were specified exactly, resulting in the browser stretching the image beyond it’s original proportions.

Resizing and processing an image for a specific use on the web is going to give much better results.

Processing Images For The Web (Part 1) - Introduction
Processing Images For The Web (Part 3) - Proper Resizing
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web

While the web isn’t a new concept, I find that there are still quite a few sites that don’t handle images very well. There are several problems that you need to be aware of.

First Some Background

When dealing with images for the web they are defined by their width and height in pixels. A pixel is a single point of color in an image. Line up pixels side-by-side and you get the width of an image. Top-to-bottom and you get the height of an image. Each digital camera has it’s own resolution (width and height in pixels) based on the image sensor in the camera. My current camera, the Canon 5D, produces images that are 4368 pixels wide x 2912 pixels tall (or when multiplied together 12.7 Million pixels).

With images for the web all we need to know is the width and height of the image and what width and height we want it to show on our web page.

Remodeled Kitchen - 400 pixels wide x 267 pixels high

DPI, or dots per inch, is another aspect of images that is often mentioned. However, it is only relevant when you print an image. DPI refers to how many pixels, or dots, get printed in one inch of paper. DPI is usually around 300 for most printers. To keep things simple a Canon 5D image printed at 300 DPI would print at 14.56″ wide (4368 pixels / 300 DPI) x 9.71″ tall (2912 pixels / 300 DPI).

That is a pretty large print, and is way too large for the web. The image above is ten times smaller than what came out of the camera. That is a lot of image data that is now gone. Making sure the image looks good after that much data loss, and that it is displayed properly will be discussed next.

Processing Images For The Web (Part 2) - The IMG Is Everything
Processing Images For The Web (Part 3) - Proper Resizing
Processing Images For The Web (Part 4) - Sharpening (not just for knives)

Digital Photography photoshop, sharpening, web