Images

Master the art of aspect ratio and orientation with these quick tips!

If you're feeling lost when it comes to aspect ratio and orientation, you're not alone. My guide breaks down the basics and offers practical advice to help you create engaging visual content that pops!

Portrait and landscape, aspect ratio.

Maybe because there is an association with rationality in the word pair Aspect Ratio, but I never fully grasped its meaning.

I took a closer look and checked the etymology of aspect. When you say something has multiple aspects, then it can be translated to sides. You look at the multiple sides of an object. And ratio has the meaning of reason and calculation.

In Aspect Ratio, the word ratio is used in the mathematical sense: relationship between the numbers. So, this little semantic detour leads to this description of Aspect Ratio:

The relationship between two sides of a rectangle

Including the square (1:1). And there are countless rectangles in digital productions. So let's dig in a bit deeper and have a look at aspect ratio's of screens, images and video's.

Aspect Ratio of a screen

The screen is of course a physical object and as such has a fixed Aspect Ratio. In TV sets, these ratios are more or less standardized. They used to be 4:3 in the past (more square) and have gone more rectangular later on. To 16:9. If you want to see an even wider screen, you can go to the cinema.

For computer screens, there are different aspect ratio’s. In general, they will be 16:9 for a monitor and 16:10 for a laptop.

Some common examples of screens and there aspect ratio.

The tablet and the mobile phone are special cases in the sense that they can be used as a tall screen or a wide screen.

Some examples of Aspect Ratio's on mobile phone screens (@Bullfrag)

Aspect Ratio of an image

Next to the screens also images and video have an aspect ratio. Images can have an array of ratio’s. Even a single image can have be used for different ratio’s. Either by cropping or scaling.

Orientation of the image

Is the image orientation to be lying or standing? When the image is lying down and broad, wider than it is high, it is called landscape. When the image orientation is more high than broad, they are called portrait.

Portrait and landscape. They could have the same aspect ratiobut have a different orientation.

Dimension

This is how many pixels an image will have on either sides of the rectangle. It can be described as size as well.

Practical use

When you work with templates for sites of application, an image will have a fixed aspect ratio, dimension and orientation. You can see this on the feeds and timelines of for instance Twitter and Facebook. There are guides that can help you find the image with the right orientation and aspect ratio. In digital productions, finding the right image and size is so often necessary, and I wrote a separate article on landscape and portrait images (orientation) for social media.

Aspect Ratio of images and video's displayed on a mobile phone (@effectivespend)

Aspect ratio of a video

Video mostly will match the aspect ratio of the screen it is intended to be played on. But on digital devices like phone, tablet and computer they are fixed by the platform you publish on. Vimeo, YouTube, Twitch, Twitter. I would say the vast majority of online video has an aspect ratio of 16 by 9.