First, what is image aspect ratio? Here’s a good definition from Wikipedia…
“The aspect ratio of an image describes the proportional relationship between its width and its height. It is commonly expressed as two numbers separated by a colon, as in 16:9.”
Aspect Ratio through the Eyes of Your HD TV
Video deals a lot with aspect ratio. If you have a nice flat screen HDTV, you’ll be familiar with this.
You’ll see display options like 4:3 or 16:9. You can think of these as 4×3 inches or 16×9 inches if that helps.
The graphic below shows both of these aspect ratios and what they look like combined…
So, as you can see, there is wasted space in both “combined” examples.
Why am I going on about TV resolution? Because it illustrates a problem all too common with the websites we build and manage.
When you take a picture, what do you think about? You think about the subject. That’s your focus at that moment (at least for most).
When you’re searching stock photo sites like iStock or ThinkStock, what are you looking for? A specific theme, subject matter, color, etc.
What happens when you go to use that image on your blog or in an image carousel on your website? Does it fit?
A Better Way to Think about Images for The Web
I’m going to pick on one of our clients to show you how much aspect ratio matters.
Jason Miller, the genius mind behind these restaurants, was obviously focused on the food for each shot. To him, that’s what matters most.
Let’s take a look at two of the aspect ratios we were working with in our design…
On the page above we have 2 very different aspect ratios. The plated food image (banner image) is a very extreme landscape, almost a panoramic (3:2). The Eat, Drink and Catering images (callout image) are more of the 4:3 landscape format.
Some of the images that Jason wanted to use made perfect sense from a subject matter standpoint but simply didn’t fit into that extreme landscape aspect ratio. The crops would have been way too close.
If you tried to add an image in a “portrait” aspect ratio, 2:3 or 4:5 for example, in either of those, it simply would not work.
Now, to be fair, I’ve panned out quite a bit for the example above. We use that wide of an aspect ratio (3:2) so it will fill the screen for the target screen resolutions.
Here is the Leesburg, VA page as most would see it…
This is where frustration can set in. You have the “perfect picture” but it simply will not work in the space provided.
A Simple Solution for Website Images
Now that you see the importance of aspect ratios, use this knowledge when taking pictures or searching for them.
Either know the aspect ratios you’re dealing with OR (and this is a better approach) assemble a good variety of images in various aspect ratios.
Here is a great resource for understanding aspect ratios in digital photography. This line from that article is a great definition of aspect ratio…
“… aspect ratio deals with width and height. It basically describes how square (1:1) or wide (16:9) or (sic) image is.”
Do this and you’ll be much happier with your images and so will your content editors and web designers!