How To Get Consistent Results When Resizing Multiple Portrait Pictures

One of the rules of great design when it comes to your business website is that people love order. This means putting the navigation menu in the same spot on each page or using headings that have the same type size and look so people know they are headings.

Be it a resume, a website or a printed advertisement, having a structure – an order to things – aids the reader in finding the information they want and understanding the message you’re trying to communicate.

When it comes to images, this call for order is no less important. Is the image a background image? Should it stand out? What size should it be? Where should it be placed? All these details crave order.

An Orderly Website = Easier Reading

Recently, I was developing a non-profit website and my client wanted to list all the steering committee members by putting their pictures on the website. Since the number of members were quite numerous, a simple grid arrangement made sense.

However, the problem became evident when each headshot had a different background and was a different size. Some photos had more of a ‘close up’ look than others. Even when sized the same, the photos still looked very different from each other.

You know those lovely wallet pictures we get for our kids’ school pictures? Those photographers know what they are doing! Each is the same size, same amount of face and trunk shown – ah, such nice order! In business, often people don’t go for a photo shoot. They send you whatever picture they have and they can greatly vary in size and proportion.

How to Make Different Pictures Look Like They Fit Together?

The first step is choose an image that you think fits the size best. In this project, I found that a rectangle with a width of 135 pixels by 175 pixels looked about right (a pixel is a dot on the computer screen and most say there are about 72 dots per inch or 72dpi).
Having this ideal size of 135 x 175 did not match up with my images that I received; those ranged from 200 to 4000 pixels in either dimension. Math to the rescue.

1. Determine the ratio of the image. Ratio = Heigth / Width. This gave me 175/135 = 1.29, which for some reason I called 1.2 good enough.
2. Resize the image so that one of the sizes (135 or 175) fits with some space left over. In other words, for an image that was 2,304 wide by 3,456, when I resized the width to 135 the photo editor showed the height at 203. Then with my image resized to 135 wide x 203 I then cropped the image to be 135 wide x 175. Yes, a bit of the photo is lost, but it now looks the same as the others. I saved the cropped size, and then saved for the web.

Having tools, that give order to the unorderly things in life help make websites more inviting and a joy to view. So next time you find chaos with images for small business or non-profit websites, you might find this article will help you put order into the world once again. 🙂

Tim Tewalt helps small business, events and non-profits get on the web.
His customers love how he listens to their needs and finds solutions that fit.

This customer, ‘you’ centered approach makes working with Simple2web a joy.
Contact me to see how I can help you.  715.456.3976