Proportions, Ratios, Rates and Percentages Lesson

Aspect ratios

Have you noticed that depending on the device and the app you are using, the width and length of the media you are viewing can be different? Images are measured in pixels. The aspect ratio is the proportional relationship between an image's width and height. The aspect ratio also gives us an idea about the shape of the image, video, or movie. It helps you determine if the image is a short rectangle, tall rectangle or if the width and length are very close in size. If the first number in the aspect ratio is larger than the second number, then you have a short rectangle. If the first number in the aspect ratio is smaller than the second number, then you have a tall rectangle.

Black and white asset ratio image demonstrating principle described in the lesson

Let's start with your profile picture in 3 different social media apps.

Image demonstrating MR Profile Photo Ratios

Each platform has a different recommended picture size but the aspect ratio of 1:1 is the same. If the aspect ratio is 1:1, that means the width and the height of the image are the same. By definition, this is a square. Fortunately, if you use all 3 social media platforms, you can use the same profile picture and your entire image will show in all 3 platforms.

What would happen if one day in the future Facebook changed their aspect ratio of profile photos to 1:1.5? It means that the image height needs to be 50% longer than the width. (easy math for the pixel height is done like this: 170 pixels width * 1.5= 255 pixels height) How do you think that will affect your image in Facebook if you still use the image of the strawberries? It is either going to cut off part of your image or it will have letter boxing. Letter boxing is a format that creates gray or black bars at the top/bottom and pillar boxing is a format that creates gray or black bars left/right.

Red and black image demonstrating Ratio square to rectangle

Image demonstrating letter pillar boxing

Example Using Social Media

If you have an Instagram account and a Facebook account, you probably know that you have the option to create a post in Instagram and then it will automatically appear on your Facebook. This saves you time from having to post separately on each account. But there is one problem. The aspect ratio of an image in an Instagram post is not the same as the aspect ratio as a Facebook post.

Image illustrating principle discussed of social media aspect ratios

Consider this: Is there a certain device, such as as smartphone, computer, or tablet, that is more user-friendly for Instagram or Facebook? What about other social media platforms?

Example with Television Aspect Ratio

The size of a television is the length of the diagonal of its screen in inches. The aspect ratio of the screens of older televisions is 4:3, while the aspect ratio of newer wide-screen televisions is 16:9.

Find the width and height of an older 25-inch television whose screen has an aspect ratio of 4:3.

Twenty-five inches is the measurement of the screen diagonally from corner to corner. One way to do this calculation is using the Pythagorean theorem.

Image demonstrating pythagorean theorem in action. Description of the diagram below.
To figure out the lengths of the side of a right triangle, you can use the Pythagorean theorem.
a squared + b squared = c squared
C squared is equal to 25, but what about a and b?
You know that this is a 4:3 aspect television, so substitute those numbers in the theorem as 3x and 4x.

Based on the calculation shown above, you know that x equals 5. Therefore in a 4:3 aspect ratio, the length of the television screen is 20 (4 x 5) and the height of the screen is 15 (3 x 5).

What is the area of this screen? Area is calculated as L x W. So the area of this screen is 20 x 15 = 300. Do not forget your units! 20 inches x 15 inches= 300 square inches.

Practice Problem 1: You Try

Find the width and height of a new television set with an aspect ratio of 16:9. The diagonal screen measurement is also 25 inches.

TV With 25 inch ratio

Answer:

length = 21.76 inches

height = 12.24 inches

Solution:

PROBLEM 2:

Answer:

266.34 sq. in

Solution:

Using the dimensions we found for the width and height in Problem 1, we can find the area.

length x height = area

21.76 inches x 12.24 inches = 266.34 square inch

Thinking deeper

If you open YouTube on your phone, can you view the videos if you hold your phone horizontally or vertically? Of course! And magically, nothing is cut off of the videos. They will still have the same aspect ratio but they are different sizes to accommodate the width and length of the view.

[CC BY-NC-SA 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION - INTENDED ONLY FOR USE WITHIN LESSON.