Often when creating a “web ready” version of a photograph—converting it, for example, from an 8×10 image at 300 dpi to a 4×5 image at 72 dpi—the resulting image loses its edge, so to speak. It’s no longer as crisp looking as the larger, printable version. For most people, the loss of clarity may not be a big deal but if you want your online images to look their best then you need to add a sharpening step to your conversion process.
If you’re using Photoshop, there are a number of ways to sharpen images. After quite a bit of experimenting what I find works consistently well is a variation of the High Pass method. Here it is in a nutshell, (assuming you’re starting with your final print version of the image which, of course, you’ve already saved):
- Flatten the image [Layer|Flatten Image].
- Resize the image to 72 dpi changing the height and width as needed [Image|Image Size...].
- Duplicate the (background) image layer [Layer|Duplicate Layer...].
- Use the [Filter|Other|High Pass...] menu to convert the new layer to its High Pass equivalent. In the High Pass dialog pop-up, set the Radius to 0.3 pixels. On 72 dpi images this is a really touchy setting and it’s important not to set this too high. You can experiment, but you’ll find that even a 0.4 pixel radius is often too much and 0.2 is rarely enough.
- Change the blend mode of the High Pass layer to Linear Light. You almost always hear about using a blending mode of Hard Light with the High Pass method. I think you’ll agree, though, that the Linear Light mode works better for making 72 dpi images look sharp.
The Linear Light mode tends to add a bit of “sparkle” (for lack of a better word) to the highlights of the image. You’ll see this especially in areas of the photo with very fine details like eyes, jewelry, fabrics (like bride’s veils) and so on. If things look a bit too sparkly, change the blend mode to Vivid Light or, if necessary, Hard Light. Alternatively, you can stick with Linear Light and just lower the opacity of the layer some. [For the above example image I would most likely reduce the opacity of the High Pass layer some but felt it was okay to show an "extra crispy" version here to make the sharpening obvious.]
One More Important Note
None of the above helps much, or at all, if your image size doesn’t match what it will be on whatever web page the image is displayed in. That’s because the browser will resize your image to make it fit the web page and browsers, for the most part, do a terrible job of maintaining the sharpness of an image when they resize it. When you want your images to look tack sharp on the web you pretty much need to create a version of the image that is sized exactly as it will be when it’s displayed and then use the above method to sharpen the resized version.