The concept of hyperfocal distance is used in landscape photography to achieve the greatest depth of field and acceptable sharpness for both near and far objects. In the two minute tutorial above, wildlife photographer Chris Weston walks through some hyperfocal distance focusing techniques. You can also find a couple informative tutorials at DOFMaster and Cambridge in Colour.
Posts Tagged ‘sharpness’
We posted a while back on how to sharpen your photos like Flickr for smaller resolution images. The technique used “Unsharp Mask”, but today we’ll quickly describe how you can ensure sharpness using a simple setting.
When you reduce the size of an image in Photoshop, there’s an option on the Image Size screen that allows you to choose how the image is resampled (shown above). By default, this is set to “Bicubic”, but that’s not optimal for shrinking photographs down to smaller sizes for the web. Instead, you should use “Bicubic Sharper” to preserve the sharpness in your photo.
Here’s a demonstration of the difference. The following photograph was resized from 3883px wide down to 500px using “Bicubic”:
Now compare that photograph with the following version, which we resized using “Bicubic Sharper”:
You can hover your mouse over either photograph to compare it the other (you might have to wait a few seconds to see the change).
To set “bicubic sharper” as your default, go to
Preferences->General->Image Interpoation->Bicubic Sharper (best for reduction)
If you’ve been resizing images poorly in the past, you should now see a noticeable increase in sharpness! Yay!
Everyone wants sharp images when they post their photographs online. After all, who wants to look at a blurry photograph? (Unless it’s intentional, of course). What many people don’t realize, however, is that displaying your images incorrectly in HTML can have a big negative impact on image quality.
Here is the main rule of thumb you should always remember: never, ever do image resizing using HTML.
For example, lets say I have the following 620px photograph:
The image is pretty sharp right? Now, lets say I want to display the same image as a 500px wide photo. The wrong way to do this would be to change the width=”620″ attribute in HTML to width=”500″. Here’s what would result if I did the resizing this way through HTML:
That’s the exact same image file. I simply copy-and-pasted the HTML, and changed the width from 620 to 500. This means the browser actually loaded the same 620px image, and then reprocessed it to display a 500px image to the viewer. Notice how the photograph instantly loses much of the sharpness it had when displayed in its actual dimensions.
To further illustrate my point, here is the same photo displayed at 500px. However, instead of telling HTML to shrink the large version, I used Photoshop to resize it down to 500px.
You can hover your mouse over this last image to compare it to the browser-resized version. If you’re using a browser that renders it correctly, try hovering over this link to see how other less-capable browsers render the same image (you might have to wait a couple seconds for the image to load). That’s a pretty big difference, huh?
The lesson to be learned is that you should always display your images in their exact dimensions. Even a single pixel difference can cause the photograph to become noticeably more blurry in most browsers.
Finally, another reason why you shouldn’t leave resizing to your browser is that the original, full-sized image is loaded anyway, regardless of what size you’re displaying the image at. This means that if you have a large, 1 megabyte, 1024×682 photograph that you’re displaying at 500px in width, the whole 1 megabyte image is downloaded by the visitor before the browser resizes it down to 500px.
Some of you might have thought that using larger, higher-resolution photographs and having them resized in HTML produces higher quality images, since there’s more information or detail in the file. It doesn’t. For best image quality and fastest loading time for your visitors, always resize your images to the desired size prior to uploading!
Update: I’ve added a second link under the mouse-hover comparison for those who are using more capable browsers. If you don’t see any difference in hovering over the image, try hovering over the new link to see how other browsers render the image.
Update 2: Just for your info: This doesn’t apply to uploading full-sized images to photo sharing services like Flickr or SmugMug. These services take your large resolution photograph, and reprocess it into multiple images of various sizes. Thus, when you’re viewing the 500px image on Flickr, it’s actually a 500px image that Flickr resized and sharpened using your original large image.
Here’s a useful resource I found a while back that many of you might find helpful. SLRGear.com is a website that conducts comprehensive tests on camera lenses, and publishes them in the form of diagrams and illustrations.
One of the features my friends and I have found most useful is the blur index illustration that it provides. This interactive chart helps you find the “sweet spot” for your lens, showing you where the lens is sharpest as you choose a specific focal length and aperture.
From the screenshot above of the Canon 24-70mm blur index chart, you can see that there is a sizable “sweet spot” of sharpness in the center of the frame at 35mm f/2.8. As you move towards the outer edges of the frame, there is less sharpness and more blur. Most of the time you will find that lenses have the largest sweet spot at f/4.0 to f/5.6. If you increase the f-number beyond that, you start losing sharpness again.