Aspect Ratio

What is Aspect Ratio?

Aspect ratio describes the ratio between the width and height of an image or screen. A 1:1 aspect ratio, for example, is a square.

The first number always refers to the width, and the second number refers to the height.
If the ratio of an image is different than the ratio of your screen, you may not see the whole image. Images won’t fit properly if the screen is narrower than the image.

How Aspect Ratio Affects Web Design

The ratio of our computer or cell phone screen is different than the ratio of most images. As a result, users will have a better experience on your website when you choose an image that adjusts based on screen size.

1. Computer Screen vs Mobile

Computer screens are multi-column and wider than smartphone screens. Therefore, when you design with only one device in mind, images may become skewed or distorted. For example, a designer focused solely on how the desktop website looks may overlook the glaring design flaws of the mobile experience.

Thankfully, it’s pretty easy to place images in an element that changes the aspect ratio based on the screen size. Does it take an extra moment or two? Sure. But it’s worth the experience boost.

2. Most Common Aspect Ratio Formats

Common aspect ratios include 1:1, 16:9, 3:2, 4:3, and 5:9. A square 1:1 ratio means the width and height are the same. This is a convenient format for mobile screens. It’s probably most recognizable as the classic Instagram aspect ratio.

The widescreen, 16:9 ratio creates wide images like a cover image on social media. However, these are too wide for a mobile screen unless the user rotates the device.

3. How and Why to Change the Aspect Ratio

You may need to change the aspect ratio of an image so it is compatible with the platform or device you are using. The easiest way to change the aspect ratio of an image is to crop it.

4. How to Choose the Right Aspect Ratio

The answer to, “What’s the right aspect ratio to use in my design?” is that it depends. Here are three questions you need to ask yourself when choosing an aspect ratio:

1. Where is this image going to appear to the user?
2. Do I need to create multiple versions (i.e. crops) of this design?
3. Can it be designed in a way to easily adapt, no matter the screen size?

When in doubt, think about others. As a designer, it’s your job to take the user on an easy-to-follow journey through your website, app, print brochure, or whatever project you may be working on this week.

5. Pixel Aspect Ratio (PAR) and Resolution

Pixel Aspect Ratio (PAR) describes the width and height of individual pixels. The size of the pixels determines the resolution of the screen. So, smaller pixels result in greater, more detailed screen resolution. How does that relate to aspect ratio?

Well, in the digital world, we use a square PAR because of the wide variety of screen sizes. If we used rectangular PAR, it would cause distortion. An example of this truth is found in the way Wikipedia describes the issues of non-square pixels:

Now that we’ve outlined the various ways aspect ratio affects your designs, let’s dive deeper into the specifics of how to use it.

Using Aspect Ratio in Modern Design

Modern web design requires designers to pay special attention to PAR, resolution, image crops, and how to use object-fit CSS to manipulate visual elements. Each directly relates to aspect ratio in some way. In this section, we’ll go into more detail on how and why you need to be conscious of it in your designs.

1. Pay Attention to PAR and Resolution

PAR affects your image and video clarity, while resolution affects the details. Best practices recommend always using square, 1:1, PAR. Wider screens may distort the shape or clarity when an image has non-square pixels.

Be mindful of the PAR when using video editing software or using video clips that may not have the same PAR. Also consider the PAR when applying special effects.

2. Crop Images Carefully

When designing, consider the various ways it’s going to get cropped. As a good rule of thumb, create a focal point at the center of your design. Keep all of the important details in this area. That way, when it’s time to crop, it will remain in the safe zone.

For example, if you have an image of a surfer, center the top of the wave and the surfer before cropping the image.

Unfortunately, some images can’t handle cropping without losing important details. As an alternative, you can also use a white or gray letterbox to change the aspect ratio.

Do you want the most important part of your design to get lost? Of course not! Stay aware of the various ways it’ll get cropped up in its journey through the web.

Even more simply, keep the important stuff near the center.

3. Use CSS Tags to Control Ratios

CSS tags tell images how to behave. The object-fit: contain tag preserves the aspect ratio of the image by automatically adding letterboxing filler on the edges that do not fit the provided aspect ratio of the image element.

Object-fit also allows the values, fill, cover, none, and auto> (in Opera).

Fill changes the aspect ratio based on the values set.

Cover maintains the original aspect ratio but changes the width and height of an image.

This level of control enables designers to consider their work from multiple angles. It’s often a challenge, especially in the beginning. However, the more you practice, the more you see how empowering it is to design with multiple iterations in mind.