Resizing Delicate Images

Today by purely experimentation I learned a way to adjust the size of images while preserving hard edges. Although I know there are probably better ways to do this, but what I am about to explain does work. I was looking for some social icons for a site I was making and after I found some good ones I noticed that there was a few pixels difference in size. Some people may not care about something so small but I am a perfectionist and always try to get everything as close to perfect as possible.

The Problem

Normally when you resize an image it will expand stretch everything and sometimes this is okay however when you are working with especially small graphics this can often cause the image to look fuzzy or lopsided. For the icons I was trying to adjust it was crucial that they maintained the dark 1px border around the edges. If I were to simply resize the image it would expand the 1px border to 2 or 3 pixels and make it look like crap.

The Solution

Pixels are discrete units. You cannot have save a fraction of a pixel so when you resize/modify and then save a graphic it ignores any fractions of a pixel that may have been present. For example when you are enlarging an image by 10% any element of the image less than 5px will remain the same size.

5 * 110% = 5.5 (Rounded is 6 – an increase of 1px)

4 * 110% = 4.4 (Rounded is 4 – no change)

What this means is that if you want to resize an image from 100px to 120px, then going from 100px to 110px then from 110px to 120px (two steps), is not the same as going from 100px to 120px (one step).

After realizing this is should make sense that if I wanted to preserve a 1px edge like that in the social icons I should simply resize the image 1px at a time until I got the desired size. Hopefully this was helpful to somebody and good luck on your projects.