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:
- Film & Television
- Digital Imagery & Web Design
The most common aspect ratios are:
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:9Wikipedia 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 Size||Usage||Aspect Ratio|
|1920×1080 px||HDTV, presentations and social media||16:9|
|1280×720 px||Standard HD for photography and film||4:3|
|1080×1080 px||Social media e.g. Instagram and Facebook||1:1|
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?
Get the latest articles
Content from industry experts, delivered straight to your inbox - as soon as they're released.