Scaling down pictures in Photoshop

Since I do encounter pictures, graphics and other art on web-sites which look quite blurry and people often ask why pictures look a bit crisper on my site it is time to share that knowledge with everyone.

The tools

It does not really matter whether you are using Photoshop, Photoshop Elements or any other image editing software for better pictures as long as your application can do the following steps as well, or at least in a similar fashion. I am using Photoshop Extended (CS3) for this tutorial but any other version will do the job just as good.

Preparation: cropping the picture

You should get your picture, graphic, or whatever you would like to scale down, cropped at the right proportions before you start. I chose a picture taken with my digital camera at 8 megapixels and cropped it down to a landscape format. I am using 2 windows within Photoshop to help you see the differences and details in the picture.

Step 1: Checking your picture’s dimensions

You probably have a target size in mind. For this tutorial I have decided that I want my picture 300 pixels wide. You can find the size of your picture at image » image size … in the menu. I am assuming your picture is far bigger than what you would like to end up with. If you only want to shrink your picture a little you might want to start at a later point within this tutorial.

Step 2: Sharpening your picture

The first “little secret” is to sharpen your picture before scaling it down. This enhances delicate textures and prevents their vanishing during the down-sizing. I am using the Filter » Sharpen » Unsharpen mask option here since it does not sharpen the whole picture but rather the textures and fine details that need preserving.

Play around with the settings a bit to get familiar with the controls and the results. In this scenario I picked an amount of 130%, a radius of 1,0 pixels, and a threshold of 0 levels. Your picture might need other settings but probably something similar will be just fine. Once you have done this a few times you’ll get comfortable with the settings … trust me!

Step 3: Reducing dimensions – for the first time

Now comes the part where you need to get out your calculator in case you don’t like a little simple algebra exercise.

Take your target dimensions (in my case that is 300 pixels in width) and multiply that number by 4 (again that gives me a result of 300 pixels x 4 = 1200 pixels). That number is your first size to reduce your picture to.

Stop, why that you might ask?! We will scale the picture down in a few steps and make sure that we do not loose too much detail on the way down to the smaller sizes.

Step 4: Save the details!

Okay, we are down to 1200 pixels (you might have a different width or height, whatever you are aiming at). Time to get the sharpener out again because we lost some details. I choose the amount of 60%, a radius of 0,6 pixels, and a threshold of 0 levels in Filter » Sharpen » Unsharpen mask again. Things might look a bit too crisp which is okay! By the way: using the above values is my default for a lot of reductions. They work fairly well as a general purpose setting.

Step 5: Down by demand

Okay, repetition time. Next you shrink your picture to half of your current size using Image » Image size. In my case that means 600 pixels in width.

Step 6: One more time

As explained above, you sharpen your picture (use 60% / 0,6 pixels / 0 again) and reduce it to your final size (mine is 300 pixels in width). Last but not least, sharpen again using the unsharpen mask.

Step 6: Done, but too crisp?!

Well done! There is your crisp picture waiting for its great moment to be put on your website or blog. But what if it is too crisp now?

Step 7: Take back some of the sharpening

Use Edit » Fade … and reduce your last filter application until the pictures appearance is fine with you.

Usually 50% is a good measure to avoid “over-sharpening”. Test and try until your picture is fine.

Advantage repetition

When comparing the just finished picture with one that is just scaled down you will probably see quite a difference, even if you sharpen the one scaled down directly to your final dimensions. Click on the screen-shots above to see a larger version.

Although it takes a little longer to prepare pictures like this the result is often a lot better than the simple way. Having people asking what I do to my images proves that it is worth the effort I guess. Of course you could create an action or automate this process in case you have the same dimensions and genres of pictures more often. I might to a little tutorial on automatic or batch conversion a little later.

I am looking forward to your feedback and recommendations.

This entry was posted on Wednesday, August 29th, 2007 at 15:37 and is filed under Knowledge. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.