Dominic Brenton

At work recently, a colleague asked me to reduce a batch of logos to thumbnail size so that they could be added to a web page. This set me thinking: given that logos come in all sorts of shapes, how do you ensure that one logo is no larger – and hence no more dominant on a page or presentation slide – than another?

The answer is to resize them all so that they occupy, as closely as possible, the same number of pixels. For example, a square logo measuring 300px by 300px occupies the same area as one that is 900px by 100px. Unfortunately, few logos are designed to fit such easy-to-compare dimensions.

Thus I have created an Excel spreadsheet that you are welcome to use.

Download image area reduction calculator

Here’s how to use it.

1. Specify how large you would like all your images to be, in terms of a target equivalent width and height (this enables the spreadsheet to calculate in the background the total area that the spreadsheet uses). For a website thumbnail, a value of 100 by 100px might work well; if you are going to use the images in print, they will need to be considerably larger.
2. In Photoshop, open your logo or image and choose Image Size from the Image menu and note the value for the longest edge of the image; copy it into the spreadsheet at step 1.
3. Repeat for the shorter edge of the image at step 2.
4. Note the updated value given in the spreadsheet for the longest edge and enter it into the box that contains the longest edge value that you wish to replace. Provided that ‘Constrain proportions’ is ticked, Photoshop should automatically update the value for the shorter edge.
5. Click OK and Photoshop will resize your image for you.

Repeat steps 2–4 for the other images that you wish to resize to occupy the same pixel area.

Please note that this spreadsheet is not designed to produce vaues for enlarging logos; they should never be enlarged in Photoshop unless you are doing so from original vector artwork (usually in the form of .eps or .tif files).

For those interested in the mathematics behind the spreadsheet, multiplying the target width and height (say 100 px apiece, as above) yields the total pixel area that the image will occupy (10,000 px). Next, from the image width and height (say 250 by 100), you calculate the aspect ratio of the logo, expressed as a decimal value; this gives you the scaling factor you need in the algebra.

The equation involved is:

Total pixel area = (aspect ratio of image × x) × x

In this case:

10,000 = 2.5x²

Resolving the equation by dividing 10,000 by 2.5 and taking its square root reveals the value of x to be 63.245, the length of the shorter side. Multiplying this by the aspect ratio of 2.5 yields the length of the longer side, 158.114 pixels. Given that Photoshop only deals with image size in terms of whole numbers of pixels, the values need to be rounded; I do so at the latest possible stage.

I also provide calculations of pixels ‘unused’ due to rounding, and of whole number values for the aspect ratio; it would make life much easier sometimes if logos were designed in ones that are very easy to grasp!

In the example above, a logo resized to 158 by 63 pixels occupies 9954 pixels – the closest we can get to 10,000 in whole numbers at the aspect ratio of 5:2.

If your work involves shrinking lots of logos, I hope this will make your life that bit easier. And if anybody out there is interested in turning it into a Web app or software plugin, go right ahead – but please give me due credit for the idea.