Present better

A beginner’s guide to aspect ratio

Posted 2022-09-26
A beginner’s guide to aspect ratio

Summary

The aspect ratio refers to an image's proportions, effecting how an image is perceived on websites, videos, and social media platforms. Understanding the aspect ratio helps designers create more effective and engaging content that is…... read more The aspect ratio refers to an image's proportions, effecting how an image is perceived on websites, videos, and social media platforms. Understanding the aspect ratio helps designers create more effective and engaging content that is consistent and better received on their platforms. close

You might already recognize aspect ratios as the ratios displayed on your digital cameras or smartphone cameras. Aspect ratios are involved in every medium that uses images or video, and since each medium uses shapes specific to its vessel, they are modified to suit different purposes. Understanding aspect ratio can help you frame images more effectively for their intended platform.

What is the aspect ratio?

Aspect ratio refers to the relationship between the width and height of an image or the image’s proportions. The aspect ratio characterizes the shape of an image as a rectangle, square, or landscape. In smartphones and most cameras, the aspect ratio is typically a horizontal or vertical rectangle.

An image’s aspect ratio is unrelated to size, so if an image had an aspect ratio of 1:1 or 400×400, it would still be square in both cases.

To understand the aspect ratio better, consider using units to picture the width and height of an image. For instance, a 3:2 aspect ratio would comprise 3 equal units for width and 2 units for height.

Pixel aspect ratio

The pixel aspect ratio or PAR is the proportion of pixels in an image. Pixels are squares, meaning that the pixel aspect ratios are 1:1. Different displays could have rectangular pixels for 4:3 aspect ratios.

Display aspect ratio

The most common or relevant aspect ratio is the display aspect ratio or DAR. It refers to the standard proportions for different screen displays. For some devices, the DAR is fixed, so images are optimized to be well-displayed for their aspect ratio. You may notice, for example, that if you show a video intended for a 16:9 widescreen on a different device, it distorts the image. That is because certain images/videos are created for particular platforms and will appear odd otherwise.

Storage aspect ratio

The storage aspect ratio or SAR is a formula related to encoded video files, referring to the relationship between the width and height of a video frame. The frames would need to all be consistent for a final video to display well. For most widescreen videos, find the display aspect ratio by multiplying the storage aspect ratio by the pixel aspect ratio.

Why is the aspect ratio important?

People retain images very quickly, so when creating video or image content the screen ratio affects how it is perceived. If the aspect ratio is inconsistent with its platform or device it will look and feel odd to the viewer.

It is especially important to keep the aspect ratio in mind for social media platforms so that images appear interesting to viewers. Luckily, there are tools available to change and amend the aspect ratio later in this article if you’re unsure where to start.

What are the popular aspect ratio formats?

The appropriate aspect ratio to use differs from purpose to device to platform. However, there are commonly utilized aspect ratios that are a constant standard for designers and photographers.

Aspect ratios

16:9 aspect ratio

You may already be familiar with the 16:9 ratio as a staple for film and TV. Its panoramic size made it perfect for TV, cinema, and computer screens. And now, its influence has migrated into digital spaces and has become the norm for online video as well.

9:16 aspect ratio 

The 9:16 aspect ratio is the default vertical ratio for social media, perfect to use in IGTV, TikTok, and stories. To avoid having your content cut off it’s best to publish TikTok and IGTV videos in a 9:16 ratio for its mobile portrait frame.

1:1 aspect ratio

Also commonly used on social media, the 1:1 aspect ratio makes a perfect square standard in social media posts (like Instagram) and web design.

4:3 aspect ratio

Originally designed for TV and computer displays, the 4:3 aspect ratio was the first used video format since TVs initially had square screens. The 4:3 format is also great for landscape photography since it captures a wide area.

3:2 aspect ratio

Slightly wider than the 4:3 format and corresponding well with the 4 x 6” photo size, the 3:2 ratio is the typical aspect ratio for 35mm film cameras.

21:9 aspect ratio

21:9 is another aspect ratio used for film, particularly for cinematic anamorphic formats that translate well on computer monitors.

4:5 aspect ratios

For platforms like Facebook, it is recommended to use a 4:5 aspect ratio for vertical videos since it gives a tight frame that creates an appealing composition in its videos.

Which aspect ratio is the best?

The best aspect ratio depends on the type of image you want to create. If you want to capture panoramic landscapes, then refer to the 16:9 aspect ratio, while the 1:1 aspect ratio is perfect for Instagram photos.

In photography, it’s best to use a full-frame camera for its high-definition sensor. That way you could crop photos to your desired aspect ratio without compromising their quality.

How to find the aspect ratio?

The formula for aspect ratios is x:y, the x being width and y resembling height. Let’s say you want to find the aspect ratio of an image with a 3000×2000 resolution, just divide the two numbers for the result, 1.5:1 or 3:2.

You could also refer to the tools mentioned below such as aspect ratio calculators to aid you.

How to adjust the aspect ratio?

Many DSLR cameras allow you to select the aspect ratio before taking photos, there will usually be a box on the screen that will show where the frame cuts off to help with composition.

Smartphones also have options to select different aspect ratios, for example, iPhones let you choose between 1:1 (square), 16:9 (panoramic), and 4:3 or default mode.

And you could always crop your photos when you edit them. Although, it is important to note that different formats will affect your final product. So, learn to plan your shots and frame them with the final aspect ratio in mind.

Is there a universally used aspect ratio?

Aspect ratios commonly used for video are the 16:9 ratio for widescreen videos and the 9:16 aspect ratio for portrait videos. Still, photos are largely shot in 3:2, 4:3, or 16:9 aspect ratios, depending on the intended final result.

How important is aspect ratio in storytelling?

Aspect ratio plays a role in the way content is received on the platform it’s shared on. Whether it’s a cinema screen, Instagram, or Youtube, the wrong aspect ratio could turn off the viewer from the video or image. However, you could use aspect ratios creatively to reflect different settings or time periods in a film.

How aspect ratios affect UI/UX design

Any project that involves an image or video display will need to consider the aspect ratio in its exhibit. The composition will play an important role in the way it will be displayed on different devices. Responsive web design guarantees that content is showcased properly on all devices and automatically resolve issues regarding the appropriate aspect ratios. However, composing an image beforehand helps avoid problems with quality or cut-off content.

When images look off or out of proportion on a website or are stretched or shrunk to fit the screen, it negatively impacts a visitor’s impression of the website. Not to mention that ill-proportioned elements can obstruct the site’s usability. All of these factors discourage a visitor from continuing to use a website. Meaning that the designers’ and developers’ knowledge of aspect ratios should contribute to creating a fluid structure for a comfortable and practical visual effect.

Aspect ratio in UX/UI design

Aspect ratio and responsive design

When thinking about responsive design, you will need to maintain a cohesive shape across several devices. Understanding aspect ratios ensure that meaning is not lost when images are cropped. In responsive website design, designers could resize images manually or use coding to control how they appear on the screen.

In these cases it’s helpful to think of aspect ratios as percentages, like 4:3 is 75% and 16:9 is 56:25%.

Image aspect ratio changing tools

With several elements to consider when it comes to aspect ratios, from framing and composition to sizing, to measurements, it can feel overwhelming to keep up with them all to produce a great final result. Luckily, several tools are available to help you use aspect ratios effectively and efficiently.

ImageResizer

This tool helps resize images and change photo ratios. By adding the image to the interface, you could choose the aspect ratio and edit it to create the result you want.

Veed.io

Another great tool for resizing and editing, Veed.io allows you to process local and Dropbox files with its many features. Note that this tool places its watermark on processed files.

ResizeImage

ResizeImage processes GIFs and other images up to 100MB and 30MB respectively. Dropping the files to the interface, you could then select an aspect ratio, crop the image to your need, and play with other features such as adding a background and rotating.

Adobe Creative Cloud Express

With preset aspect ratios for social media platforms, Adobe Creative Cloud Express helps edit images in all the relevant formats quickly and easily. You can also set up your own custom aspect ratio based on your taste or need.

Kapwing

Kapwing offers a range of editing features to fix up processed images. Daunting at first, but once you learn the ropes, you’re able to efficiently use the tool’s options to your advantage. Its diverse features let you pad and choose background colors for your images.

Croppola

Once your image is processed, Croppola selects the appropriate aspect ratio and lets you crop images automatically. It also offers an option for you to change and select the aspect ratio and crop the image manually yourself.

Clideo

After adding your images from your device, Google Drive, or Dropbox, this tool has social media presets and customizable options to resize the image as per your requirement, along with the option to crop, fit, and fill.

ImgOnline

This editing tool supports diverse functions such as converting, compressing, and effects, along with cropping and resizing. Plus, its settings for adjusting DPI size and interpolation make it a very handy tool to have on hand.

The context or platform for an image means that the shape will play a role in how effectively the image is perceived. Knowing the ways that the aspect ratio influences a viewer’s experience helps photographers and designers make smarter decisions in planning and framing images.

 

×