Resize images proportionally.

Aspect ratio: the shape of the frame decides the story

Before there is an image, there is a frame.
Wide or tall. Square or long. That choice changes everything inside it.

A wide frame tells a landscape story. A tall frame follows a person. A square holds still.

Photographers know this. Filmmakers know this. Designers sometimes forget it, because the platform decides for them.
This guide helps you decide yourself.

✦ What an aspect ratio is

An aspect ratio is the relation between width and height. It is written as two numbers: width first, then height.

A screen of 1920 by 1080 pixels has a ratio of 16:9. Divide both numbers by 120 and you get 16 and 9.
Sometimes the ratio is written as one number. 16:9 is about 1.78. The width is 1.78 times the height.

The size can change. The ratio stays. A 16:9 image can be a small thumbnail or a cinema screen. The shape is the same.

✦ How to calculate a new size

You have an image of 1920 by 1080. You need it 1280 pixels wide. How tall must it be?

New height = new width × original height ÷ original width.
1280 × 1080 ÷ 1920 = 720.

So 1280 by 720. Same shape, smaller size. No stretching.
This tool does that calculation for you, in both directions.

✦ How to use this tool

1. Enter the original width and height. Or click one of the presets: 16:9, 1:1, 4:5, 9:16, 4:3 or 3:2.
2. Enter the new width. Or the new height.
3. Click Calculate. The missing value appears.
4. Click Copy CSS to get the aspect-ratio value for your stylesheet.
5. Use Reset to start with a new image.

✦ Ratios you will meet

• 16:9. Video, presentations, most screens. Common size: 1920 × 1080.
• 9:16. Stories, reels and short vertical video. Common size: 1080 × 1920.
• 4:5. Portrait posts on Instagram. Common size: 1080 × 1350. Takes more space in the feed than a square.
• 1:1. The square. 1080 × 1080. Calm, central, easy to repeat in a grid.
• 4:3. Older screens and many tablets. A comfortable, slightly wide frame.
• 3:2. The classic photo format from 35 mm film, still used by most cameras.
• 1:1.414. The A-series paper formats, like A4 (210 × 297 mm).

✦ The clever shape of A4

The A-series has a beautiful property. Fold an A4 sheet in half and you get A5. Same ratio.
Fold again: A6. Same ratio again.

That works because the ratio is 1 to the square root of 2. It is why a poster, a flyer and a postcard in the A-series can share one layout, just scaled.
A small piece of mathematics that saves designers hours every week.

✦ Composition per shape

Wide frames like 16:9 are good for landscapes, groups of people, and movement from left to right. The eye travels.

Tall frames like 9:16 and 4:5 are good for one person, a full outfit, a building, a single object. The eye moves up and down. It feels close and personal.

Square frames are good for symmetry and centered subjects. The eye rests in the middle.

A classic help is the rule of thirds. Divide the frame into three by three. Place the subject on one of the lines, not exactly in the center.
It is not a law. It is a way to avoid images that feel stiff.

✦ Cropping is choosing

Every crop is a decision about what matters.
Cut too close and the subject has no room. Leave too much and it gets lost.

A simple test: what must be seen first? Keep that. Then remove what does not help.
Often the image improves with every centimeter you take away.

✦ One image, many formats

The same photo will be used in several shapes. A banner. A post. A story.
Place the subject so it survives the crops. Not exactly in the middle, but not on the edge either.
Leave some empty space around it. Empty space is a gift for later.

If you shoot or design for several platforms, start wide and high enough. You can always crop smaller. You can never crop bigger.

✦ Safe zones in vertical video

In stories and reels, the app places buttons, names and captions over your image. Usually at the top and at the bottom.

Keep text and faces away from those edges. Roughly the top and bottom seventh of the frame is risky.
Check the platform's current guidelines, because interfaces change.

✦ Aspect ratio on the web

When an image loads slowly, the page can jump. Text moves down. Visitors lose their place, or click the wrong thing.

The CSS aspect-ratio property prevents that. Give the image or video container a ratio, like aspect-ratio: 16 / 9. The browser reserves the space before the image arrives.

Combine it with object-fit: cover and images fill the frame without stretching. The browser crops the edges instead.

✦ Video: bars and upscaling

Put a 16:9 video in a 4:3 frame and you get black bars above and below. That is called letterboxing. The opposite, bars on the sides, is pillarboxing.
Bars are not wrong. Stretching is.

And avoid making an image larger than its original size. Pixels do not grow back. The result is soft and blurry.

✦ In practice

One campaign, three platforms. A 16:9 banner for the website, a 4:5 post, a 9:16 story.
Design wide enough to crop all three. Keep the main subject and the text in the center area that all three share.

A portfolio grid. Mixed image shapes make a grid restless. Choose one ratio, for example 3:2, and crop everything to it.
The work becomes the focus, not the jumping edges.

An embedded video on a website. Use the CSS aspect-ratio property on the container. The space is reserved before the video loads.
The page no longer jumps.

A printed flyer and an online version. Design the flyer in A5. For the web, keep the same ratio and export at screen size.
One layout. Two worlds.

✦ Four questions before you crop

1. What do you want to say? Space and context, or closeness and detail?
2. What must be seen first? Keep that subject, and give it some room.
3. What can go? Edges that add nothing. A crop is also a clean-up.
4. What is the next small step? Crop one image in three ratios. Compare.

✦ Common mistakes

• Stretching an image to fit. Faces and circles give it away immediately.
• Letting a platform crop for you. It will cut off the wrong part.
• Text too close to the edge of a vertical video. Interface buttons will cover it.
• Mixing many ratios on one page or in one grid.
• Upscaling small images to fill a large frame.
• Forgetting the ratio in CSS, so the page jumps while images load.

✦ A small checklist

• Every image is cropped, never stretched.
• The subject survives every format you need.
• Text in vertical video stays away from the top and bottom edges.
• A grid uses one ratio throughout.
• Image containers on the web have an aspect ratio set in CSS.
• The original file is kept, uncropped, for later formats.

✦ Try this

Five images in one. Take one photo. Make five crops in five different ratios. Give each one a title.
You will see that the frame changes the story, even when the photo stays the same.

The square challenge. Crop ten of your own photos to 1:1. Which ones get stronger? Which ones lose their meaning?

✦ Words worth knowing

• Aspect ratio. The relation between width and height.
• Crop. Cutting away part of an image to change its frame.
• Letterbox. Black bars above and below a video.
• Safe zone. The area where content will not be covered by interface elements.
• Bleed. In print: image that runs past the edge of the page, so no white line appears after cutting.

✦ From the classroom

We give students two paper L-shapes. Move them over a photo. Make a frame. Then another.
One photo can hold five different images. Finding them is the skill.