The Beginner’s Guide to Posting Sharper Images

Text and Photography Copyright Jim White - All rights reserved.

The first time I posted a web image in a critique forum was in 2002. It was on NPN. I wanted to make a good first impression, and the image was one of my best. It was scanned from a 35mm Velvia transparency, and sized in a basic photo editing tool. The critiques it received basically suggested that it was ‘soft’. Comments talked about USM, sharpening, and jpeg artefacts. These were all strange words that highlighted my fundamental naivety regarding digital post-processing. They really had nothing to do with the original image I wanted critiqued. So much for my first impression!

Back then I didn’t know what to do to correct the problem. As I now watch Travel Photographers Network newcomers experiencing similar problems, it seems appropriate to reveal some of those deep dark secrets of successful web image posting to those who want to know.

The basic steps outlined in this article will create acceptable high quality, web-friendly images that conform to the TPN guidelines. They can obviously also be used for other websites and for e-mail photos as well. This article is based around the Adobe Photoshop products, and attempts to limit the tools used to those found in Adobe Photoshop Elements as well. If you are already familiar with web image publishing, or are an experienced user of Adobe Photoshop, you may want to proceed directly to Haggadorn’s article posted over on NPN.

For purposes of illustration, I’ll use a recent shot of Parliament in the twilight. This is not the image posted in 2002, but the steps taken here will mimic what I did to prepare my first post. Then we can see how to improve the quality of the image.

My First-Post Workflow: Knowing the TPN guidelines, I resized the image to 640 pixels on its longest side, and saved it as a jpeg with a low enough quality setting to get it under the 120KB file size limit. Unfortunately, the resulting image appears soft after the resizing and compression. Critiques against this image would probably say something like, “Looks like a nice evening in London, but your image seems a bit soft on my monitor.” This isn’t very helpful to the photographer (or interesting for the person critiquing).

What happened, and how do we get past it?

The image, when it was resized from 2000x3000 pixels down to 414x640 pixels, underwent significant mathematical manipulation. A lot of information was lost, and some of its sharpness went with it. In order to recover that edge, you need to ‘sharpen’ the image. In Photoshop, the basic tool for this is the Unsharp Mask (USM). Seems a bit counter-intuitive to use an Unsharp Mask to sharpen an image, eh? (Someone explained it to me once, but my brain fried during the discussion and all I could think of was escaping to a desert island. The beauty is that we don’t really need to know why it works, or where it got its name. It just works.)

So we go back to the stage where the image has just been re-sized to be 640 pixels on the long side. Then choose [Filter; Sharpen; Unsharp Mask…] option on the Photoshop menu, and a dialog window opens. There are three USM settings: Amount; Radius; and Threshold.

A good starting point for lightly sharpening small (web-sized) images is Amount: 150; Radius: 0.2; Threshold: 0. Note that I used the phrase ‘starting point’. If an image is busy (for example the detailed tile work in an ancient Turkish mosque) you want to go lightly with sharpening. If an image is less busy (for example a simple bell tower and sky at twilight) you may want to go a bit heavier with the USM.

Play with the settings a bit. Go to the extremes to see what happens. Set the Amount to 300%, or to the max and see the results. Set the radius to 3, 6, 9 and see what happens. When it all goes horribly wrong, go back to the starting point and try again.

If you over-sharpen an image, it will start to look ‘crispy’, and colour halos (jpeg artefacts) will start appearing around the edges of contrasting colour and density. (See the halo around Parliament when the settings are set too high!) When in doubt, tend to err on the light side.

Advanced Version: If you have Photoshop 7 or higher (I don’t know about the other versions or Elements) you can modify the sharpening process to allow more aggressive sharpening without JPEG artefacts. Where you would previously only have used the USM, perform the following steps:

• Choose Image; Mode; Lab Colour – This is a (virtually) lossless conversion for PS.
• Open the Channels Window and choose the ‘Lightness’ channel. – This allows you to view only the density of the image, not the colour aspects. The image goes to Black & White, but don’t worry, nothing has been lost. The colour will return soon!
• Perform your usual USM on this channel (USM: 150; 0.2; 0) – Not sharp enough? Do it again!
• Choose Image; Mode; RGB Colour - Now you’re back in your normal colour mode and the image should look … well … sharper.
• The benefit of this LAB colour method is that you are not sharpening the colours, only the density. That eliminated many of the colour halo JPE artefacts that result from over sharpening!

Now you have an image that is the right size, and it looks perfect on your monitor, but you’re not home yet. You’ve met the maximum image size requirement, but the file size limit for TPN / NPN is 120KB. As we discovered in the initial attempt: that means dropping the JPEG quality way down. The resulting compression can again produce artefacts and will soften the image. It will quickly undo all the good work you just did to sharpen that image.

Save it for the Web

The trick for creating a decent image in Photoshop that is under the TPN guideline for file size is the ‘Save for Web…’ command! Choose the [File; Save for Web…] option to open up a dialog box that features views of your image and a number of possible settings.

First we need to make sure we’re set up properly to perform the operation. The image window should have four options to it: Original; Optimized; 2-Up; and 4-Up. I tend to view the Optimized window. Take a look at the others to see what they do, but come back to the Optimized’ window when you’re ready. It shows you what the saved file will look like.

Next we need to ensure that we have the right settings. On the right, there is a drop-down box that lets you choose the file type. Options include: JPEG; GIF; PNG; and WBMP. For most images, you’ll simply want to choose JPEG.

When JPEG is chosen, an option for Quality appears, and down in the bottom left corner of the window you will also see the word ‘JPEG’ and the file size in KB. You can now dial in the Quality setting until the file size goes just under 120KB. The ‘Optimized’ window now shows you the image as it will appear on the web at that quality and file size. An image saved with this tool is of a far higher quality for small file size than if you simply used the ‘Save As’ command!

To show the difference, a comparison photo is displayed here. This isn’t a true comparison of the difference the workflow makes as obviously both images were saved using the same process! But it shows how sharpening an image can give it more impact!

Now save that file and post it on TPN!

Epilogue

It should be mentioned that there are a hundred different ways to sharpen an image, and this is only one fairly simple option. Readers are invited to submit other options for Adobe or other software packages, and I’ll happily append them to this article as appropriate.

If you found this article useful, please let me know. If appropriate, I’ll continue with follow-on tips about other parts of the workflow.

About the Author

Jim White is the Editor at Travel Photographer Online Magazine. Jim's work can be viewed at JimWhitePhotos.com, in PhotoPortfolios.net, and in the TPN and NPN forums.

Comments on TPN travel photography articles? Please feel free to send them to editor@travelphotographers.net. We would be pleased to hear from you!