May 1, 2009 on 9:36 pm | In Making | No Comments

If you’ve ever had to scale an image down for the web – or especially to make an icon – you might have noticed that the image actually gets a bit blurrier sometimes. This is surprising! We all know when you scale images up they get blurrier, but you would think when you scale down they’d get sharper, right? Well, no. Scaling down means taking a mathematical average between neighboring pixels and this will make fine details get softer as the colors of the background ‘bleed’ into them.

To help show this I’ve made up some example images.

This set shows how thin lines and text get blurrier as they get smaller. The original 128×128 image has been scaled down to 64×64 and 32×32. The bottom row of text on each image has not been scaled, but added after scaling at an equivalent point size.

128×128 original	64×64 scaled	32×32 scaled

We can see that the lines blur into each other and become less sharp. Notice how the bottom line of text is more bold than the middle line, especially in the 32×32 image. This is why it’s usually a good idea to add text onto an icon once it’s been shrunk to the correct size. Conversely if you want to photoshop lots of different parts of an image to make a montage, I tend to do it at 2x the resolution I need and then scale down, as this blends the different parts together and makes them ’sit’ well. (e.g. this image which is a montage.)

The next images show a 128×128 grid and its scaled down to 50% and then 25% of its original size.

128×128 original	64×64 scaled	32×32 scaled

Here it’s even clearer that the high contrast black and white gets averaged out to a grey.

To compensate for this, you can use the Photoshop ’sharpen’ or ‘unsharp mask’ filters to inject more contrast and harder edges back into your image. You may even want to increase the contrast directly (either after, or even before scaling down). There’s no right or wrong way to adjust – it depends on the image and what looks good to you. Obviously, some very fine details may be unavoidably lost in the scaling and no amount of ’sharpen’ will bring them back.