Skip to content

Understanding Image Aspect Ratio

Deciding on the best images for your website isn’t just about finding images that look good. We also need to think about how they will fit within your website design, which means thinking about aspect ratios. 

“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.”

http://en.wikipedia.org/wiki/Aspect_ratio_(image)

“Aspect ratio deals with width and height. It basically describes how square (1:1) or wide (16:9) an image is.”

The Art of Using Aspect Ratios

Common Aspect Ratios

Aspect ratios tend to vary widely across industries:

  • Photography
  • Film & Television
  • Digital Imagery & Web Design

The most common aspect ratios are:

  • 16:9
  • 3:2
  • 4:3
  • 1:1

A 4:3 ratio is typically used for TV displays, computer monitors, and digital cameras. An image sized at 1024 x 768 pixels fits a typical 4:3 ratio. 4:3 was the standard ratio for TV and computer prior to HDTV overtaking it.

The 16:9 ratio is a panoramic format mostly seen on modern computer monitors and “widescreen” TVs. Most laptops now also support a cinema-friendly 16:9 ratio. This international standard recently replaced the 4:3 ratio for monitors and TV screens, creating a slimmer, more elongated rectangular shape compared to the 4:3 format. Common resolutions in the 16:9 ratio are 1920 x 1080 pixels and 1280 x 720 pixels. On the web, the 16×9 aspect ratio works well for full-width background photos.

As of 2016, most computer monitors use widescreen displays with an aspect ratio of 16:9

Wikipedia Display Aspect Ratio

Note: Digital SLRs create images in a 3:2 ratio (close to the Golden Ratio but not exactly. Microsoft went with the 3:2 aspect ratio (2160 x 1440) in the Surface Pro 3. Microsoft chose that aspect over the previously used 16:9 because they say it falls right in between 4:3 and 16:9, which are the two most common aspects in books and media. In other words, they’re billing it as the best middle of the road solution.

Common Image Sizes

Here are some of the most common image sizes on the web.

Image SizeUsageAspect Ratio
1920×1080 pxHDTV, presentations and social media16:9
1280×720 pxStandard HD for photography and film4:3
1080×1080 pxSocial media e.g. Instagram and Facebook1:1

Key Considerations

There is no aspect ratio “standard” for web images, however below are some important points to consider:

  • Where will the majority of your images comes from? (Professional photographer, Stock photography site, Screenshots, Employees etc)
  • Is it important to allow sharing to other services that have recommended image sizes?
  • How do the majority of your users access your website or application?
  • Will you be using full-width background photos?
  • Will photos be sitting alongside “widescreen” videos?

Stuart Brameld

Get the latest articles

Content from industry experts, delivered straight to your inbox - as soon as they're released.