Illustration by Erica Fasoli
Every image, canvas, and artboard can be defined by its unique shape, and an aspect ratio is used to describe the fixed proportions of these shapes. An aspect ratio is often a rectangle or square, and always bounded by a fixed height and width. Simply put, an aspect ratio is how large an image’s width is compared to its height (often expressed in an “X:Y” format) without any pixels or units attached.
It’s important to note that aspect ratio is not simply just a measurement of width and height, but it is a number that is reduced to the smallest possible ratio. For example, if the dimensions of a rectangle are 50-inches wide and 100-inches tall, the ratio is 1:2, as opposed to 50:100. This allows designers to communicate in a common language by reducing the aspect ratio to the lowest ratio possible. Therefore, a 1:2 ratio will remain consistent and true whether the dimensions are 100×200 inches or 500×1000 inches.
Aspect ratio formula
Aspect ratios are written out as a formula of width to height. On Instagram, you will notice that photos are on a 1:1 (one-to-one) square grid. On the other hand, YouTube’s frame is a rectangle with an aspect ratio of 16:9. If an image or video’s aspect ratio is different than the device it is viewed on, the image will be cropped. In web design, designers want to avoid having images cropped and potentially losing their meaning to the user. Therefore, it is always important to note the aspect ratio of your device when preparing images and videos for your design.
One key characteristic of aspect ratios is that they do not change. For example, a ratio of 1:1 will always be 1:1, no matter the dimensions of the image. An image could be 200×200 pixels or 500×500 pixels, but the aspect ratio will always remain 1:1. On the other hand, a 16:9 aspect ratio in pixels could be 1024×576 pixels or 1152×648 pixels. With both dimensions, the aspect ratio will always be 16:9.
What are the most common screen aspect ratios?
10 computer screens with varying sizes and their aspect ratios written on their screens. Image credit Adobe.When working with aspect ratios, it is important to know the most common ones used in design. Particular screens call for different aspect ratios. Here are the most common aspect ratios for screens:
1:1
A 1:1 ratio is a square with equal width and height. It is commonly used in smartwatches and when preparing that perfect photo for Instagram. It is the aspect ratio to choose when you wish to have a square canvas.
3:2
This aspect ratio is popular due to film. In fact, most aspect ratios originated due to film photography and have since evolved into the digital space. 35mm film first made the 3:2 aspect ratio popular, and this ratio is still popular in photography today.
4:3
The 4:3 aspect ratio is common on computer monitors and television screens. Older models of televisions were often created with this ratio.
16:9
Televisions have since evolved to include the popular widescreen, which has an aspect ratio of 16:9. Widescreen videos, computer monitors, and presentation slides also commonly have an aspect ratio of 16:9. In fact, most phones and cameras will default to recording videos at this ratio.
What are the most popular mobile phone aspect ratios?
For phone screens, there are some common aspect ratio trends among many manufacturers. For example, Apple uses a ratio of 19.5:9 for its iPhone 8, 11, and 12. However, the iPhone X had a ratio of 13:6, while earlier models (iPhone 5, 6, 7) had a ratio of 16:9. It is clear that Apple is currently favoring 19.5:9 and time will only tell if they change.
Android devices tend to have an aspect ratio of 16:9, while some vary with a ratio of 16:10. At the end of the day, make sure to do your research online to determine the aspect ratio of your screen in order to fully understand your constraints before jumping into the design.
Aspect ratios and responsive design
As you can tell, there is no set-in-stone aspect ratio you should use for images and videos. To accommodate for these variations, responsive design comes into play. Responsive design helps you maintain a specific shape for images and video across multiple devices. To achieve this, images and videos will have a specific aspect ratio in the CSS. This ensures that the meaning of your content does not change because of an image being cropped.
For example, if you design a homepage with a hero image of two people hugging and one person gets cut off, the meaning of that photo completely changes. If you have multiple images being cropped while using a responsive repeat grid, this can scale and heavily impact your user’s experience. By maintaining an aspect ratio in the CSS, you can help ensure the image does not become cropped and ineffective.
Overhead view of a user looking down at a smart phone. Image credit Adobe.Aspect ratios calculator
In order to determine this aspect ratio of images and videos, you can utilize an aspect ratio calculator when creating your wireframes. Some of the most popular free aspect ratio calculators available online are:
Take control of aspect ratios in your design work
Desiging with different aspect ratios in mind helps a designer understand how their images and videos will be viewed on particular canvases. Recognizing this will save you time and help you avoid extra work in the future. It will also help you avoid cropped photos and lost meaning due to ratio constraints. Knowing the ins and outs of aspect ratios is yet another valuable tool in any designer’s tool belt.