What is the Aspect Ratio?
Aspect ratio might sound confusing for beginner designers at first, but it is a relatively simple subject to understand. We promise. In this article, we will explain everything you need to know.
What’s the first thing you do when you open Vectornator? You choose the shape of your artboard.
If you think about it, every canvas, image, or graphic has its own shape. Usually, that shape is a rectangle, and this rectangle has a unique proportion based on the display medium.
In simple terms, this defines the aspect ratio. While perhaps not the sexiest of design topics, aspect ratio is nonetheless an important consideration for any designer. We know how challenging it is when you have to crop and convert graphics to fit a variety of mediums like mobile, computer, and iPad; or a variety of channels, like website, social, apps. So let’s dive into it, shall we?
What is aspect ratio?
An aspect ratio is the proportional relationship between a graphic’s width and height.
Aspect ratios are written as a formula like this: 16:9 (where 16 represents the width and 9 represents the heights). Why so? Because most screens are wider than they are tall, so the aspect ratio will naturally have a horizontal orientation.
As a simple example, a square image has an aspect ratio of 1:1, since the height and width are the same (some math does come in handy!). But the image could be 500px × 500px, or 1500px × 1500px, and the aspect ratio would still be 1:1.
What are common aspect ratios
- 1:1 is the square format. Throwback to Instagram’s strict square image requirements. Glad those days are gone!
- 3:2 and 4:3 are standard photo sizes
- 16:9 is the standard widescreen aspect ratio.
- 9:16 is the vertical video we view on our phone. It’s a perfect 90 degrees flip of the 16:9 ratio.
Mediums you need to consider
Monitors and Devices
At the turn of the millennium, almost all computer monitors used a 4:3 aspect ratio. Only 90’s kids will remember. But by 2010, an aspect ratio of 16:9 had become the standard.
Phones are more commonly used than tablets, however, the preference for consuming content on a phone is usually vertical. Who flips their phone anymore, right? This has resulted in inverted aspect ratios becoming much more common, such as 9:16 rather than 16:9.
Social media image sizes seem to change constantly. Today you have a perfect cover image for your account. Tomorrow, it’s been resized, and looks all pixelated and stretched.
Check out our Template Hub for a full guide into social media aspect ratios and templates to make your design process as easy as 1, 2, 3!
Cropping to aspect ratio
Manipulating the aspect ratio is called cropping. You might need to change the aspect ratio of your graphic so it’s compatible with the medium it’s presented on. This way you ensure that the end-user sees the correct information.
To do this, Vectornator offers a super simple way to crop images by using masks. If you'd like to learn more about masks read our detailed Learning Hub article about it.
But before you crop your graphic, you need to ask yourself these questions:
- Where is this image going to appear to the user?
- Do I need to create multiple versions of this design?
Aspect ratio in your designs
Having learned what aspect ratio is and how to manipulate it, it’s time to consider how it impacts your design.
There’s not going to be one image that fits all your requirements. Sometimes you’ll be able to change the aspect ratio to make the picture work without compromising the subject – but sometimes that just won’t be possible. It’s crucial that the subject is fully included in your images of any aspect ratio.
So if you have a blog header, a blog thumbnail, and maybe a blog icon for your latest post, all of them need to make sense in their particular aspect ratios.
Is the concept of the cropped picture easily understood by the viewer? If the answer is no, you’ll have to consider whether the shape or the subject is more important, and what you’re willing to change. Since the aspect ratio is usually fixed, you’ll have to change the image. But it all depends on your project of course.
I hope we explained what is aspect ratio for you. If you want to practice resizing images for various aspect ratios, or you’d like to download our handy, pre-existing templates head to Vectornator and create away!