The aspect ratio of an image, video, or lottie animation is the media’s width relative to the height. A change or mistake in the aspect ratio can dramatically affect the user experience, cutting out essential parts of the frame and leaving the viewer up in arms.
Earlier this month, Netflix released the beloved sitcom Seinfeld to its viewers for the first time. While many fans rejoiced in 90s nostalgia, others were outraged after finding some crucial imagery of the show’s jokes about nothing had been cropped out of the frame. The culprit…a change in aspect ratio from when the show was filmed to how Netflix accommodates modern televisions, phones, and tablets.
Today we are going to cover the ins and outs of aspect ratio related to modern digital content. After reading the article, you will be able to conquer the aspect ratio across various platforms. We will go over:
- What is aspect ratio?
- Aspect ratio vs. resolution
- How to calculate and change your aspect ratio
- The optimal aspect ratio
- Creating proportional ads
- Adhering to major social media platforms
- How to change the aspect ratio in Premiere and Photoshop
- Checking content across multiple devices
- How to seamlessly size and post on desktop
What is Aspect Ratio?
Aspect ratio is a fraction that expresses an image or video’s width to height ratio; it is represented with a colon like so W:H. The term originates from the silent film era, where humans first enjoyed video content. 5:4 was the original aspect ratio in the early days of movies; technology progressed, widening out the frame to 4:3. Today the standard aspect ratio for film is 16:9.
Shows like Seinfeld and The Simpsons, created decades ago before high-definition widescreen televisions became standard, were developed in 4:3 aspect ratio. The only option for streaming services is to add black space or cut part of the top or bottom of the frame; in the case of Netflix and Disney Plus, they choose the latter.
Aspect Ratio Vs. Resolution
When editing an image or video, the size, aspect ratio, and resolution are all critical aspects of creating high-quality content. While they are all closely related and each affected by their counterparts, they are separate concepts.
Resolution refers to the number of pixels per square inch in an image or video. As the number of pixels increases, the resolution quality improves. For example, 4k resolution simply means the video has 4,000 pixels in every square inch of the frame. Aspect ratio can distort the resolution of your image or video if the size is dramatically altered.
Applying the Aspect Ratio to Your Images and Video
Most smartphones and cameras record video at 1920 x 1080 pixels. To calculate the aspect ratio, simply reduce the fraction, 1920 x 1080 = 16:9. Some creators go one step further and divide the fraction and express relative to 1, 16/9 = 1.77:1. The advantage of dividing the width by height is to easily gain perspective or if you are working with a decimal. An aspect ratio greater than 1 creates a landscape, under 1 is portrait, and 1:1 is a perfect square.
What is the Best Aspect Ratio?
The best aspect ratio allows the creator to utilize all the available space without cropping out any image or video.
Historically, the best or most popular aspect ratios have adjusted to the latest technology. Since the early 2000s, we’ve adopted the 16:9 aspect ratio for most videos because televisions, our devices, and digital platforms like YouTube are optimized for the popular screen size. However, we also have to account for the mobile phone screen and social media platforms.
The Best Aspect Ratio for Ads
The aspect ratio for digital ads is dependent on the platform, device, and ad space you are looking to purchase. Google display ads have over a dozen different sizes available with vastly different aspect ratios. Banner ads stretch across the entire screen length with a high aspect ratio, while half-page or column ads take up most of the available space with a low ratio.
Recommended Aspect Ratios for Social Media
Social media is an essential part of content creation. We must follow the specific aspect ratios from each technology company to make the best images or video possible. Below are the recommended aspect ratios for the most popular social media platforms.
Facebook
In-Feed – 1:1 or 4:5
Stories – 9:16
Video Carousel – 1:1
Stream (ads during other videos) – 16:9
Audience Network – 9:16
Twitter
Promoted Video – 1:1
Amplify Pre-Roll or Sponsorship – 1:1 or 9:16
Promoted Live Video – 16:9
Video Posts – 1:11 or 16:9
Instagram
In-Feed – Square 1:1, Portrait 4:5, Landscape 1.91:1
In-Feed Ads – 4:5
Stories – 9:16
Reels – 9:16
IGTV – 9:16
TikTok
Ads – 9:16, 1:1, 16:9
Organic Video – 9:16
LinkedIn
Native Videos – 1:2.4 or 2.4:1
Video Ads – 1:1, 9:16, 16:9
YouTube
All video – 16:9
As social media evolves, more content opportunities are added to the respected platforms. It’s hard to believe that just a few years ago, Instagram stories didn’t exist. Make sure to check the documentation to ensure you are using the most up-to-date sizes and aspect ratios.
Sizing Your Images in Premiere and Photoshop
Adjusting the aspect ratio in Premiere is done automatically when you create your frame size. In the settings tab of a New Sequence dialog box, enter your desired frame size; Premiere will automatically generate the aspect ratio. You might need to edit the scale in the Effects Controls tab if the change zoomed in or out of the video too much for your liking.
In Photoshop, aspect ratio is changed with the Crop Tool. When you click on the tool in the sidebar, you will see a ratio drop down in the header. You can choose a popular aspect ratio in the drop-down or enter your own in the fields directly to the right.
Tip for Sizing and Posting
Successfully navigating different aspect ratios allows you to create responsive content that can be seamlessly enjoyed on desktop or a smartphone. Images or videos can be in different sizes but if they have an appropriate aspect ratio, they will fit the desired screen size relative to other components on the page.
A great way to test aspect ratios for online content is with the Google Chrome developer tool, ‘Inspect.’ The browser will go into developer mode where you can change the screen size to fit popular phones, tablets, and desktop.
How to Use Google Inspect to Check Aspect Ratios
- If you aren’t already using Chrome, download free from the internet browser.
- Right-click on your web page with your newly created content.
- Click ‘Inspect’ at the very bottom.
- In the header of the developer section there is an icon with a phone and tablet, click on the icon.
- At the top of your browser, a new toolbar will appear with a drop-down of popular devices and their WxH ratios.
- Now you can check how your content will look across multiple devices.
Posting Directly on Desktop with Google Dev Tools
A problem creators run into when posting produced content to mobile-first platforms like Instagram and TikTok is sending their image or video to their phone from their desktop. When we send content over the internet the service provider compresses the file to lighten the load. The overall quality of an image or video can be affected by compression.
Google Developer Tools allows us to work with the mobile version of an app from our desktop. Navigate to IG or TikTok, perform the steps above, and refresh the page. You are now using the mobile version of the website and can post images and video directly from your local storage, no need to email to your phone.
Keeping Aspect Ratio in Mind When Creating Content
If the videographers of Seinfeld had known they would one day be at the mercy of streaming platforms to distribute their show and the aspect ratio would progressively get wider, a few scenes would have been filmed differently. Most notably, a bit about a pothole that has now (thanks to the 16:9 aspect ratio) been cropped out of the bottom of the frame.
As technology evolves, we will likely have to adjust our content to the latest device or media conglomerates. However, once you’ve mastered aspect ratios adapting your content across different mediums becomes second nature.
