Aspect Ratio Explained
What is aspect ratio, and how does it work? In this guide we’ll dive into practical applications of the concept in anything from web design to social media and photography.
As a designer, it’s essential that you have a basic understanding of aspect ratio and how it works. Simply put, the aspect ratio of an image refers to the relationship between its width and its height. Typically aspect ratios are written with the width first, followed by the height; with a colon separating the two numbers. Two very commonly seen examples are 16:9 and 4:3, but in practice there are countless aspect ratios in use.
Sometimes you may see aspect ratios expressed in other ways too (e.g. 16x9 or 4x3). However, such non-standard forms of indicating aspect ratio should be avoided, as they may potentially lead to confusion. The main reason for this is that, by expressing aspect ratio in ways other than the usual X:Y format, the numbers may be mistaken for measurements. And it is important to underline that the concept of aspect ratio is entirely independent of actual dimensions. Indeed, a very small image may in practice have exactly the same aspect ratio as a very large one, and vice versa.
Confused? Well, it can help to think of aspect ratio as a cocktail recipe. For example, a simple margarita might be made of 3 parts tequila, to 2 parts triple sec, to 1 part lime juice. In practice this means that whatever you add in the way of lime juice, there should be twice as much triple sec, and three times as much tequila.
If you’re making a single margarita, that could just be the juice of one lime; followed by its equivalent x2 and x3 in the other ingredients. But if you’re mixing up a whole bunch of margaritas, that might instead be the juice of ten limes - again multiplied x2 and x3 for the other ingredients. The quantities may change, but if you want your big vat of margaritas to taste as good as the single one, the relationship between the ingredients must always remain the same.
Luckily though, calculating the aspect ratio of an image is much easier than mixing up margaritas. You only have to worry about two ingredients; width and height.
Just to be sure that this is totally clear, a square image has an aspect ratio of 1:1 - its width and height being exactly the same. So if the width is 1 pixel, the height will also be 1 pixel. But if the width is 12 inches, height will be 12 inches. And so on. Another simple example would be the aspect ratio of 3:2 that is often seen in stills photography. Here, height is two thirds of width, so an image that measures 12 inches on the longest side will be 8 inches high. If instead it measures 60 inches on its longest side, the other side will measure 40 inches. Vastly different dimensions; same aspect ratio.
Enjoying this post?
Sign up here to get content on prototyping, design, and the latest Framer updates delivered to your inbox.
The examples provided so far have been very straightforward and shouldn’t present too much of a challenge for most people to get their heads around. Unfortunately, though, many aspect ratios you are likely to come across as a designer won’t be as straightforward as 1:1 or 3:2.
Thankfully there are several standard aspect ratios in common usage, making things a little simpler to deal with. However, the bad news is that different types of images have their own standards. So even when it comes to just the most common aspect ratios, there are quite a few that you’ll need to become familiar with.
Let’s now take a look at some of the most frequently seen aspect ratios according to image type and usage.
Aspect Ratio in Film, TV, and Video
One of the main areas where you are likely to encounter issues regarding aspect ratio is when working on design projects related to film, TV, and video, Such as idents and titles. Aspect ratio in film has a long history of change, consequently standard aspect ratios have varied considerably over time as new film formats and technologies emerged. Historical changes in aspect ratio often mean that, in order for older media content to be shown on modern devices, either the image area must be partially cropped to fit the screen, or content must be shown with black bars above and below the image area.
In the early days of silent motion pictures, a ratio of 4:3 was often used - an aspect ratio that, while currently out of favor in cinema projections, remains popular in video even today. Yet probably the most common aspect ratios used for the projection of movies in cinemas now are 1.85:1 and 2.39:1.
The standard aspect ratios used for TV have not only changed over time, but also varied significantly between geographical regions. For example, in the US, the standard aspect ratio for television was for a long time 4:3. However, in Japan 5:3 was used for many years before converting to 16:9; which is now the international standard for both HDTV and non-HDTV across much of the world.
In video, aspect ratio has also tended to vary somewhat according to era and geographical location. However, for some decades now, the most common aspect ratio used for various video formats - from VHS and Betamax to MiniDV - has been 4:3
For a more in-depth look at the history of aspect ratio in film, TV, and video, check out this fascinating explanation on YouTube.
Aspect Ratio for Web Design
Hero Images and Ad Banners
In the early days of web design, ad banners appeared in a confusing range of aspect ratios, making for a highly variable and inconsistent internet browsing experience. To a large extent this issue has now been resolved by the actions of the Interactive Advertising Bureau, who introduced a number of standardized banner dimensions into their Universal Package and Ad Units Guidelines. Nonetheless, use of these standardized aspect ratios is entirely voluntary, and individual websites and service providers are ultimately free to use whichever aspect ratios they wish for banner advertising.
What’s more, be aware that not all banners have fixed, predetermined aspect ratios or dimensions. Indeed some banner ads are designed to be able to adapt to a variety of different browser windows; stretching or contracting in order to fit the page.
Similarly, photography is widely used in web design, often as “hero images” at the top of a web page. But as it is impossible to know what kind of device or web browser visitors to a given page will be using, hero images must be able to adapt to diverse aspect ratios and screen resolutions.
The good news, however, is that this situation recently changed quite dramatically with the arrival of aspect-ratio: a significant advancement in aspect ratio CSS. Web designers interested in learning more should check out this guide to maintaining aspect ratios in web design.
Aspect Ratio in Photography
When it comes to aspect ratio, photography is undoubtedly one of the most confusing areas of all. Indeed, over the history of the photographic medium, the existence of a vast array of film types and camera formats - not to mention the idiosyncratic quirks of individual camera manufacturers - have lead to a bewildering variety of aspect ratios existing side by side. The fact that photos are often cropped after the fact only makes things more confusing.
Having said this, there are a number of standard photographic ratios that have remained consistently popular over many decades. Of these, the most frequently seen are 4:3, 16:9, and 3:2. While 3:2 was the aspect ratio of 35mm film, today it is also common to find 3:2 in many consumer and professional level digital cameras - both “full frame” and some “cropped” sensor models. Similarly, several medium format analog photography aspect ratios have continued over into digital photography too.
Aspect Ratio of Computer Monitors and Devices
At around the turn of the Millennium, most computer monitors used the 4:3 aspect ratio. By 2008, however, 16:10 (also expressed as 8:5) had become the most common aspect ratio for LCD monitors and laptop computer displays. Yet the popularity enjoyed by 16:10 was short-lived, and by 2010 an aspect ratio of 16:9 had come to replace it.
While 16:9 remains the most common aspect ratio for computer screens today, in recent years the release of a wide range of new mobile devices such as smartphones and tablets has only served to complicate this story. One of the most notable disruptions being the increased preference for vertical format videos shot on smartphones, resulting in inverted aspect ratios such as 9:16 rather than 16:9.
Social Media: Twitter, TikTok, Instagram, and YouTube Aspect Ratio
The rise in popularity of IGTV combined with Instagram’s historical preference for the square photo format has made the 1:1 aspect ratio very popular for videos in recent years. Not only is 1:1 now common for Instagram videos, but today 1:1 is also supported by several other social networks such as Twitter and Facebook video.
TikoTok also offers users the possibility to upload videos with a 1:1 aspect ratio, alongside the more traditional 16:9 (and indeed 9:16 for vertical videos). Meanwhile, understanding YouTube aspect ratio remains much less complicated, with all YouTube videos fixed at a standard aspect ratio of 16:9.
Cropping and Resizing
Clearly one of the most important tasks related to aspect ratio that you’ll likely be faced with as a designer is simply maintaining consistent aspect ratios between various design elements so that they all line up nicely on the page. With print design, maintaining a consistent aspect ratio across various assets is fairly straightforward. Desktop programs such as InDesign allow you to simply copy an image window and drop a new file into it - positioning the image as you wish without changing the dimensions of the window. What’s more, images usually become an integral part of the page layout itself, with the whole page likely outputted for printing as a single unified file - meaning there is no risk of aspect ratios changing.
With web design, however, images tend to retain their autonomy, with each element on a web page loading separately. So in order for all the images within a web design project to maintain the same aspect ratio, you will usually need to resize the original files so that they exactly match. In practice this means permanently resizing and/or cropping your images one by one.
Although more time-consuming than merely duplicating a drag-and-drop image window in InDesign, image editing programs such as Photoshop nonetheless offer convenient tools for resizing images to a specific aspect ratio or set of dimensions. While resizing tools vary depending on the software, most photo editing apps will permit you to resize an image while maintaining aspect ratio. Look for the “chain link” symbol on the menu bar when resizing.
Aspect Ratio Calculator
Knowing that you need to maintain or achieve a certain aspect ratio is one thing, but calculating it is entirely another. Thankfully, for those with an aversion to doing complicated math, a number of handy aspect ratio calculators are available for free online. These allow you to quickly enter the width and height of a given image, and then receive a readout of that image’s aspect ratio.
While perhaps not the sexiest of design topics, aspect ratio is nonetheless an important consideration for any graphic designer. Aspect ratio impacts a wide range of visual media, and although once there was a time that, say, the aspect ratio of TV or film was of little or no concern to most graphic designers, advancements in digital technologies and changes in user behavior have increasingly blurred the boundaries between previously segmented disciplines. As a consequence, today a graphic designer is almost as likely to have to worry about the aspect ratio of widescreen cinema as of a DSLR camera sensor or International Paper sizes.
Thankfully, handy tools such as those provided within design software such as Adobe’s Photoshop, Lightroom, and InDesign, or freeware such as GIMP, make changing image aspect ratio fairly straightforward. Meanwhile, a number of free online aspect ratio calculators and changers take all the pain out of processing intellectually challenging aspect ratio equations.