Taking Pictures for the Web

A 16 x 9 photo

Step Back, Not In

If you’re like most people, you often use your smart phone to take photographs of family and friends for immeditate posting on Facebook or Instagram. And like everyone, you usually compose those photographs “tight in the frame,” meaning you crop them as you shoot using the camera’s viewfinder, then send them straight out to social media.

But if you’re shooting pictures for a website, using this method can waste your time and create tremendous headaches, regardless of whether you are designing the site yourself or turning the images over to a professional web developer. The reason why is that you can’t determine at the time you take your photographs just exactly how they might be used on the web. And if you shoot your photos too tightly in the frame, there is a good chance they will be unusable on your website.

So instead of stepping forward to frame your images tightly in the camera’s view finder, step back so you create sufficient padding around all four sides of the primary focal subject. This way, you’ll have greater flexibility when laying out images with your site’s written content.

It Depends on the Aspect Ratio

In addition to creating additional padding when shooting, layout flexibility also depends on which aspect ratio you use when shooting the original and which ratio you want to use when placing it on a specific page. Aspect ratio is the ratio of an image’s width x height reduced to the lowest common denominator. So if an image is 750 pixels wide by 500 pixels high, then its aspect ratio would be 3:2.

As Andrew Gibson explains, the standard aspect ratio of 35mm digital and film cameras is 3:2, meaning the width is one and a half times the height, as in our example above. Note that aspect ratio has nothing to do with the actual size or resolution of the photograph, only its shape as determined by the ratio between the two dimensions.

Most digital cameras today come with software that allows you change your aspect ratio on the fly, with plenty of megapixels that allow you to shoot from further away, then crop into the image later. The photography app ProCamera, which I use instead of the standard iOS camera, supports the following aspect ratios.

Width Height Description
3 2 Standard for both digital and film 35mm cameras.
1 1 Square ratio sometimes used by older frame cameras. Also used for thumbnail images on eCommerce product pages.
3 1 A super wide aspect ratio for showing panoramic images.
1.61 1 Known as the Golden Ratio, this aspect ratio is often found in nature and has been used for centuries in architecture and design.
5 4 Often used by larger format cameras with film dimensions of 5 x 4 inches or 10 x 8 inches.
4 3 Used by older television sets and computer monitors.
16 9 Used by most modern “cinema display” laptops and computer monitors. Close to the Golden Ratio, but not quite as tall.

Choosing the wrong aspect ratio or shooting the image with a tight frame can ruin your ability to effectively use the photograph in another aspect ratio. The same goes with any picture taken originally in either portrait or landscape mode. If you compose the image too tightly within the viewfinder, then you’ll be unable to use the picture in the other mode. The layout flexibility of any image really depends on the aspect ratio used to shoot the original and how much padding you leave around the image’s primary focal subject.

Or in other words, whether you step in or step out.

Stepping In, @ 3:2

To give you an example of how stepping in can limit your image’s layout possibilities, let’s take the image below that was shot in the Goat Rocks Wilderness Area of Washington state. And for the sake of this example, let’s pretend it was shot tightly framed within the camera’s view finder at a 3:2 aspect ratio.

Next, let’s see what this particular image would look like if we recropped it at both 16:9 and 4:5.

At 16:9, you can see what happens. The background scenery is just about gone, and the poor dog has lost his feet.

Switching to 4:5, you can see the situation gets even worse for our four-legged friend, who has now lost half of his body. The original decision to crop tightly in the camera’s view finder limits how you can use this photograph in other aspect ratios.

Stepping Back, @ 3:2

Okay, this time, let’s use the same ratio, but step back from the primary focal subject to create padding around all four sides.

See how much better the image looks when cropped at both the 16:9 and 4:5 aspect ratios? And the poor dog gets at least some of his feet back and most of his body! (What a beautiful dog).

Below shows the original 3:2 images side by side, so you can see the difference more readily. Because of the extra padding in the original shot and the squarish aspect ratio that 3:2 affords, you’ll have a lot more options on how to use this image on your website. And so will your web developer, who will love you for thinking ahead.

Shot Tightly @3:2

With Padding @3:2