Beta
Design Tips
<g opacity="0.5"> <path d="M6.6729 20.3516C8.50093 20.3516 9.79065 20.989 10.3738 21.3626C10.5757 21.4725 11.0804 21.7802 11.215 21.8352V4.38462C10.4075 3.04396 8.23178 2 6.03364 2C3.06168 2 0.672897 3.62637 0 4.9011V20.5714C0.011215 21.5824 0.594392 22 1.30093 22C1.81682 22 2.13084 21.8352 2.48972 21.5714C3.16262 21.044 4.71028 20.3516 6.6729 20.3516ZM17.3495 20.3516C19.3009 20.3516 20.8486 21.044 21.5215 21.5714C21.8692 21.8242 22.1944 22 22.6991 22C23.4056 22 24 21.5824 24 20.5824V4.9011C23.3383 3.62637 20.9607 2 17.9888 2C15.7794 2 13.615 3.04396 12.7963 4.38462V21.8462C12.9308 21.8022 13.4355 21.4835 13.6486 21.3626C14.2206 20.989 15.5103 20.3516 17.3495 20.3516Z" fill="currentColor"/> </g>
What is the Aspect Ratio?

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

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:

  1. Where is this image going to appear to the user?
  2. 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!

Download
Download the PDF version here.
Subscribed.
Something went wrong while submitting the form. Try again.