Resize and sharpen for web: Showing your images at

Here is a great resizing and sharpening method for those of you keen to show the maximum detail in your web images.

I wish I could remember where I read it on the net but subsequent google searches havent shown up anything. Marc Adamus uses a variant of this method which is actually what lead me to use it because I noticed a certain clarity in the sharpness his images which were not present in mine.

Who should read this
I should point out that many people here dont even do basic sharpening very well or at all for web images, but it does make a difference when it is done correctly. Also this is really aimed at people who want to show their work at the highest quality on the web.

An example
So first off here is a comparison of the two methods:


The difference appears quite small but in my opinion the advanced method is far superior. It picks out the finer details much much better. Look at the grass on the left image, it looks blurry and crunchy in comparison to the pin sharp grass on the right.

How the method works
This method exploits the way Photoshop's Bicubic resize algorythm works to retain finer details. That's all you need to know!

Step by step

1: Flatten the image

2: Resize image to 1.666 times the final size you want. If your final output size is 600px then you should resize at this point to 1000px

3: Apply the Sharpen filter (not Unsharp Mask)

4: Duplicate the layer

5: Apply Sharpen filter (to the top layer, it will look waaaay oversharpened)

5: Resize to final output size. So if you have just resized your iamge to 1000px resize it to 600px now.

6: Apply smart sharpen (set to gaussian blur, 0.2px, 80%). This just brings out a little more crispness!

7: Use a layer mask on the top (sharpest) layer to adjust opacity and mask areas which look oversharpened. Alternatively just adjust the opacity.

8: You may wish to slightly correct the saturation and brightness which will have changed fractionally during the process.

Download the actions
If you can't be bothered to do it all yourself then I would suggest downloading the action I have created which gives sizes between just 100px and 1024px (all the sizes I have used since starting using this method). If you have CS3 and you arent familiar with actions, read the help! They really are very handy for repetitive tasks.

Download the action

To load the action in Photoshop CS3 open the actions pallete click on the little button with a triangle on it and select "Load Action", its that simple.