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.
- 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.
- 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. 🙂
March 27, 2013 @ 10:57 PM
Hi Tim. These are handy tips. I agree with you 100% on working out the height to width ratio. I have found that I needed to do this on my clients site. I seem to be doing this in photoshop all the time, especially with the kiteboarding images on my http://www.kiteboardingcairns.com.au site. Many of these are very large and need to be reduced to less than a few hundred pixels.
March 27, 2013 @ 11:00 PM
This is an ongoing challenge for me with my website for my Commercial Painting Business. Thanks for the tips
March 29, 2013 @ 11:54 AM
You are so right that many seem to think image resizing ‘just happens’, when often there are many steps to get it right! I’m glad you found these tips useful.
March 28, 2013 @ 7:31 AM
Very helpful post, Tim!
I really like the frames you’ve got the images in and look forward to that post demonstrating how you did that! 🙂
March 29, 2013 @ 5:29 PM
Julie, thanks for the reply and yes, I’ll add that to the list or another blog post. There are a lot of great ways to do these effects besides mastering Photoshop.
March 28, 2013 @ 3:18 PM
Nice work, which tools to you recommend for resizing? Do you have a favorite tool for batch resizing?
March 29, 2013 @ 11:57 AM
I find the best tools are ones that make sense to the user. I use Acorn for single images, it is a great small app. I then also like Batch Photos from the Apple app store. Quick and easy for lots of image resizing. Some also like Adobe photo effects, but I haven’t worked with that for a long time. Thanks for the comment and glad you liked the article.