Many common devices have similar aspect ratios even if they have different dimensions. Thus, it’s important to pay attention to how images with certain aspect ratios will crop and appear across different screen sizes-and ask your collaborators how intended use may be affected due to responsive design. While responsive design can account for how components are displayed on different screen sizes, there may be instances when a responsive design can cut off static images (especially those with text). For example, if you are working on a project with a colleague or a client and they’re talking about aspect ratios, they’re probably referring to the different screen sizes the product will be accessed from: a computer, tablet, mobile phone, watch, etc. However, designers may come across the term every once in a while. Aspect ratio in designĪs stated earlier, aspect ratios are most commonly used in film. Most smartphones and DSLRs record video at 1920 x 1080 pixels, which is a 16:9 aspect ratio. It’s the standard widescreen aspect ratio for videos. 16:9 RatioĪ more elongated rectangular shape, you’ll spot a 16:9 aspect ratio on presentation slides, widescreen televisions, computer monitors. Old television sets were often shaped in this dimension. 4:3 RatioĪ 4:3 ratio creates a rectangular shape that’s common on some computer monitors and television displays.

The 3:2 ratio was also used on some early model iPhones. The 3:2 aspect ratio was popularized by 35mm film and it remains popular in still camera photography today. This aspect ratio is commonly used on smart watches and you might notice a 1:1 aspect ratio on social media sites, like Instagram photos. Images with a 1:1 aspect ratio have equal width and height and are squares. Here are the most common aspect ratios: 1:1 Ratio As another example, an image could be 1920 X 1080 pixels or 1280 X 720 pixels, but both have a widescreen 16:9 aspect ratio in common. No matter if the image’s dimensions are 320 X 320 pixels or 1080 X 1080 pixels, the aspect ratio remains 1:1. So, as an example, a square ratio of 1:1 would mean the width and height of the image are the same. It’s important to remember that while two images can have the same aspect ratio, they can have varying images sizes. Aspect ratio formulaĪspect ratios are written out as a formula of width to height, such as 3:2. For an X:Y aspect ratio, the x is the image’s width and the y is the image’s height. While an image’s aspect ratio will help you understand its shape, it doesn’t determine the image’s actual size. What is an aspect ratio?įirst let’s cover the basics: An aspect ratio is how large an image’s width is compared to its height, without any pixels or units attached. So, here’s what designers need to know about aspect ratios and the user experience. However, as designers work more cross-collaboratively and design assets within websites or apps, it’s likely they’ll come across the term every so often or use it to communicate the component ratios that need to be locked. So if you drag your browser in to narrow the width, the video changes its size-adapting as you go. For example, look at InVision’s homepage: You can see how that header video appears to be a 16:9 ratio, but it responds. In UX design, aspect ratios become somewhat antiquated because they’re inflexible and good digital design is responsive. Most often, they are used in describing film. Aspect ratios are commonly presented as two numbers, separated by a colon like X:Y, or 4:3. Simply put, an image’s aspect ratio is the relationship between its width and height. Screens, images, and frames all have recognizable shapes and aspect ratio is the term used to describe the fixed proportions of these shapes. Pull up YouTube, and it’s a widescreen rectangular shape at 16:9. Take a peek at Instagram and you’ll notice the photos on your grid are neatly uniform in 1:1 squares.

Pixel aspect ratio calculator