Understanding Photo Size vs. Ratio on Your Website
Choosing the right photographs to use on your website can be critical. Beautiful photos change the dynamic of any design. But, understanding how photo size can be impacted by a website design is one of the more complicated things to explain. We have long sought the best way to help our clients visualize the difference between, for example, physical size and size ratio or inches versus pixels. We’re going to try again here.
Let’s start with a few basics.
Physical vs. Pixel Size
For physical photos like you hang on your wall, there are physical dimensions. Sizes are measured in inches (8″ x 10″ for example). On televisions and computer monitors, the unit of measurement is a pixel. This is similar to Dots Per Inch (DPI) used when printing. The more dots per square inch of space, the better the quality of the image and the more detail. The same is true of computer monitors. The more pixels per square inch, the greater the quality of the screen. This is referred to as resolution. Typically, a good, widescreen monitor will be 1920 px wide x 1080 px tall.
Portrait vs. Landscape
In case you were unaware, a “portrait” image is a vertical image. The most recognizable is the standard headshot or a book cover. A “landscape” image is horizontal, like a photo of a mountain range.
This is where things get a little dicey. The aspect ratio (or dimension) of any photo is much like its overall size and is described using the formula width:height. An 8-inch by 10-inch photo would have the same ratio (8:10), but it could be divided to 4:5 or 2:2.5, etc. It could also be expanded to 16:20 or 32:40. At any of those dimensions, the photo remains exactly the same, just smaller or larger.
The standard basic aspect ratio for most cameras is 4:3. Today’s professional digital cameras are 3:2. The professional cameras or DSLRs produce a wider, shorter image than standard point-and-shoot or phone cameras, similar to 35mm film cameras of the past. This is similar to how HDTVs are wider and shorter than their older counterparts. When you turn a phone on its side, it has a similar ratio to an HDTV and a modern digital camera.
Speaking of turning a phone on its side, it is important to note that the ratio can be reversed. A 3:2 landscape photo when rotated 90 degrees becomes a 2:3 portrait. If you have a vertical/portrait photo you want to use on your website, it won’t fit into a space designed for a horizontal/landscape image and vice versa. This may seem obvious to some of you, but trying to explain how a square peg doesn’t fit into a round hole is something we’ve done over and over again.
So, What Does This Mean for You?
Most companies (us included) opt for photos on the front page of our websites. Sometimes, these are large images which require large photo sizes. But, they also have very specific aspect ratios to which they must adhere. Below are four examples:
The image on the left is how a website would look using a standard digital camer image (4:3). The next is using a digital SLR camera (3:2). The last two are considered banner sizes (10:4 and 10:2). Note that the width of the website samples does not change, only the height.
Below, you see the image from the front of our website inserted into those designs.
Notice how dramatically the photo must be cropped for the banners and how it doesn’t fit the entire space on the Full Size Photo version. This is how photos are impacted by design and why choosing the right photo size is as important as choosing the right photo.
Regarding Actual Photo Sizes
One of the questions we often get is “how big should the photo be?” Given the fact most monitors are nearly 2000 pixels wide, we typically ask for photos that are larger than 2000 pixels in width. So, if you are wondering what we would need for a large banner image, assume 2000 pixels at minimum.
Resizing for Mobile
One final note. Modern websites must now be resizable for mobile devices. Mobile responsiveness means images must fit on screens that are much narrower than a computer monitor. How that impacts the images you use will depend on your approach. The most common approach is to resize the entire image based on its ratio. To demonstrate, grab the bottom right corner of your browser window and drag it to the left. You’ll see the images on this page reduce in size proportionally, that is they retain their aspect ratio. This is typically the most effective way to manage images of all sizes.
Whatever images you choose, the right photo size and aspect ratio will help you determine what works best. More importantly, it equips you with the tools to better understand how to use them, particularly on the front page of your website.