Tutorial: Sharpening Images For The Web

Have you ever wondered how some images you see on the web look very sharp while the ones you post are not that sharp? I faced this problem when I started writing for this blog and now I claim that I can post very sharp images on the blog. Here's what I know about the subject.

One of the eye openers for me was Roger Cicala's article about Acutance and MTF Charts, I suggest you read this article (and the rest of his articles) for excellent technical explanation about lens sharpness. If you check the black-white bars example in the beginning of Roger's article, you will be impressed by how sharpening in post can increase an image's acutance (apparent sharpness).

There are many tutorials and discussions on the web about sharpening, some people take sharpening to a religious level and use two or three different programs in sequence to sharpen one image, others (like me) just don't give it much concern and make sure to get the image as sharp as possible inside the camera first. I am not going to claim that one method is better than the other, but this is how I process my images.

SHARPENING IN LIGHTROOM (ACR)

If you don't know what the sharpening sliders in lightroom does, then by all means have a look at this tutorial or google "Adobe Camera Raw Sharpening". The absolute thing you have to learn about is the masking slider, this is a very neat trick that enables you to get very sharp images without sharpening the out of focus backgrounds or the high ISO noise in the picture.

I reached a nice preset for sharpening my images in lightroom (applied automatically when images are imported), I have the amount slider at 40, the radius at 1.2 and the masking slider somewhere between the quarter and the third. One other thing is the clarity slider, I have it set by default to +15. These settings are what I found out works best for most of my images, of course there are images that requires totally different settings, especially female portraits.

SHARPENING DURING EXPORT

Lightroom has an option to sharpen images during export, there are lots of arguments about this topic, but here's what works for me, if I am exporting images at full resolution (which I almost never do, who needs 18MP JPEGs after they have been processed?) I don't apply any sharpening during export. And the photos look very sharp at 100% magnification.

However, if I am exporting the images to a smaller size (I resize to 2000 pixel on the long side) I will apply sharpening during export, I set the Sharpen for Screen to Standard. The idea is that when you resize a picture; you are removing pixels from the photo, and this might counter what you already did in sharpening during post (since you were working on the full resolution), that's why I sharpen the image once more after resizing.

SHARPENING FOR THE WEB

I will discuss my experience with blogger (which is where this blog is hosted), you have different options for adding images to the post, you can either link, upload or use your Picasa images. I always upload my images, so let's say I uploaded a 1600 pixel wide image, when posting this image you get the following options for display size: Small, Medium, Large, X-Large and Original. Here's how each of these sizes look like:

Small Size

Medium Size

Large Size

X-Large Size

The first three sizes are too small for my taste, I appreciate reading blogs which have sharp images that fill the full width of the blog space, take Laurence Kim for an example, his posts look really nice with large detailed images and doesn't make you want to click the images to see a larger version. On the other hand, a blog like Srobist is not very pleasant in how the images are displayed, they are too small to see any details (especially lighting details, doh) and most of the time when you click them you are treated with flickr's ugly interface that forces you through a thousand clicks to reach a larger version of the image. What I want to express is that large and sharp images are very welcome in blog posts, they give a blog's look a certain finesse.

Back to our image sizes, the first three sizes are too small and the X-Large while it looks looks nicer (and sharper), unfortunately it is wider than the available blog space so I can't use it. Choosing the original size option you will use a 1600px image that would mess the post.

The solution is very simple, I know that the theme we use on our blog allows for a maximum of 600px wide images, all I have to do is go back to lightroom and export the images needed in a 600px size with sharpening for screen set to standard, this is very important. Now that I have 600px images, I can upload them and use the Original size setting, that way blogger will not interfere with how sharp the image will be. In the 1600px example, when I choose a different size, blogger will use it's own algorithm to resize the image which leads to a lower sharpness, but when I use the original size, blogger will leave the image alone and upload it as-is.

To show you how this makes a difference, below are the same image posted twice, the first image is exported from lightroom at 1600px, sharpened during export, uploaded here and displayed in the X-Large size. The second image is exported from lightroom at 600px, sharpened during export, uploaded here and displayed in it's original size. You judge which one is sharper (hint: eyebrows), of course there is no contest if you compare it to any of the first three sizes (which is what most people use).

1600px, X-Large Size, Click to see the 1600px size

600px, Original Size

CONCLUSION

Quite a difference, huh? As a conclusion, whatever web platform you are using, the best practice is to export your image for the size you are going to post on the web and upload it in it's original size, that way you prevent any web program from resizing your pictures and reducing their sharpness in return.

One last argument you might consider, "But posting the 1600px image has the benefit of clicking it to see a larger version, now all they will see when they click the image is the 600px image?". This is easily solved in blogger, you can simply upload the 1600px image beside the 600px image and link it to the 600px image. Or if your images are large and sharp enough, your readers won't have to click through to see a larger version. ;-)