Sharpening images for the web (and print)

October 3, 2007 · View Comments

in Design

Sharpen

A couple of years ago I attended a graphic design conference where I learned a great way to improve the sharpness and quality of images that are resized and then used on the Internet. This technique also works for images used in print as well.

Whenever opening and image and resizing–typically because you need to make it smaller–you inevitably make the image a bit ‘blurry.’ This is because when you resize an image the software you are using–most likely Photoshop–reinterprets each and every pixel in order to reduce the number of pixels and thus reduce the size of the image. Depending on the amount of reduction in the image the software looks at the number of pixels around a given pixel. It then determines what color that single pixel should be. When you are dealing with thousands, sometimes millions, of pixels and reducing it drastically ‘fuzziness’ is sure to happen. The image above shows the sharpen on the right half. Notice how the left is a bit “fuzzier?”

So the fix is this. In Photoshop there is a filter called the “Unsharp Mask” under the set of sharpen filters. I’m not sure why the filter is called “Unsharp” because it actually does sharpen. Anyhow, the key measurements to play with when sharpening an image are this.

  • Amount: 200%
    Generally but sometimes is too much–if so take it down to 100%, or 150%. Experiment a bit and see.
  • Radius .36
    To get the right number above, take the final ppi, or pixels per inch, and divide it in half and move the decimal 2 places to the left. So for 300ppi (typical print) images the measurement is 1.5, for 72ppi (typical web) its .36.
  • Threshold: 3 or 4
    Very little difference between the two numbers above. I typically use 4.

When entering these values you will see the shift in sharpness in the preview window. You can also click the “preview” box next to the preview window to see the effect on your larger image.

When things look good to your eye, click OK. Be sure to adjust as needed. You can tell when an image has too much sharpening. Just move the percentage slider up to 300% to see for sure.

Share and Enjoy:
  • Print
  • Digg
  • del.icio.us
  • Twitter
  • StumbleUpon
  • Technorati
  • Facebook
  • Google Bookmarks
  • NewsVine

Do you need help with Wordpress, or the Thesis theme?

Image of DoubleMule certification. I'm a Thesis Certified Designer.

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help.

If you need help with a specific WordPress or Thesis theme issue or a complete website, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.

blog comments powered by Disqus

Previous post:

Next post: