Aspect Ratio: 16:9, 4:3, 1:1 and How to Size for Social Media

A screenshot from a phone arrives in a chat, and a banner has to be made from it. The file is 1080×1920, and the brief says 16:9. Or the other way round: the design calls for 1200×630 while the photograph is 3000×2000. The aspect ratio is what turns one into the other, and it is easier to understand than it looks. In the end it is one fraction that has to be reduced.

A quick answer to most such questions comes from the aspect ratio calculator. Enter the width and the height, and it reduces them to the simplest form, shows the ratio as a decimal, and recalculates the missing side when one of them is known. Below is how it all works, so that you can count it yourself and understand what a platform is actually asking for.

What an aspect ratio is and how it is calculated

An aspect ratio is the relation of the width to the height, written as two numbers separated by a colon: 16:9. It does not depend on how many pixels the image has. A banner of 320×180 and a banner of 1920×1080 share the same ratio of 16:9, the second one is simply six times bigger in each direction. That is why it is worth reducing the numbers in any conversation about proportions: take the width and the height, divide both by their greatest common divisor, and you get the simplest form.

GCD(1920, 1080) = 120

1920 ÷ 120 = 16
1080 ÷ 120 = 9

1920 × 1080  →  16:9
1280 × 720   →  16:9   (GCD = 80)
3840 × 2160  →  16:9   (GCD = 240)

The same ratio written as a decimal is 1.7777..., and numbers like that appear in monitor specifications: 16:9, 16:10, 21:9. Not everything needs reducing: 4:3 and 1:1 are already in their simplest form, while 2560×1080 comes out as 64:27, and that is the honest answer. The ratio of 21:9 advertised on ultrawide monitors is really 2.37 and not 2.333, because manufacturers round in their own favour.

Popular formats: which resolutions each one uses

• 16:9, by far the most common: 1280×720, 1920×1080, 2560×1440, 3840×2160. Screens, video, presentations, thumbnails.
• 16:10: 1280×800, 1440×900, 1680×1050, 2560×1600. The old laptop standard, still seen today.
• 4:3: 1024×768, 800×600, 640×480. The era of nearly square television screens and the first monitors.
• 3:2: 3000×2000, 6000×4000. The classic full frame photograph: a 36×24 mm sensor.
• 1:1: 1000×1000, 1080×1080. The square, used in feeds and profile pictures.
• 4:5: 1080×1350. A vertical frame that the Instagram feed displays larger than a square one.
• 9:16: 1080×1920. Full screen video: Reels, Shorts, Stories, TikTok.
• 21:9: 2560×1080, 3440×1440. Ultrawide monitors and cinema in a wide frame.
• A4: 210×297 mm, a ratio of 70:99. Paper rather than a screen, but the calculation is the same.

Which format to pick for which job

The choice is dictated by where the picture will live. The same material often has to be prepared in several formats, and that is a normal part of the work rather than a sign of a failed design.

It is worth saying where the proportions themselves come from. The 4:3 format arrived with the television era, when the frame was built around screens and broadcast cameras, and it stayed for decades. The 16:9 format arrived with digital television and high definition, and from then on it settled into monitors, video and presentations. As for 9:16, it is the very same 16:9 turned on its side, which is why vertical video does not end up with black bars on the sides.

• For video on YouTube or for a presentation: 16:9. A wide frame fills the whole width of the player.
• For Reels, Shorts and Stories: 9:16. Such a video runs edge to edge on a phone and takes the most room in a feed.
• For a post in the Instagram feed: 4:5. The feed shows this frame larger than a square one, so it occupies more of the screen.
• For an avatar or a product card where the platform dictates the shape: 1:1.
• For print: A4 or Letter, with the pixel count derived from the DPI.
• For a cover image or a post header the requirements differ from platform to platform, so it is worth checking the documentation of the service in question.

Calculating the missing side

This is the most frequent calculation: one side is known, the ratio is known, and the other side has to be found. The formula is simple. The missing side equals the known side multiplied by the matching number of the ratio and divided by the other one.

1. Write the ratio as a fraction: width over height.
2. If the width W is known, then the height H = W × (h ÷ w), where w and h are the numbers of the ratio.
3. If the height H is known, then the width W = H × (w ÷ h).
4. Round to whole pixels and check that the result has not drifted: 1920×1080 is exactly 16:9, while 1919×1080 no longer is.

Task 1: height 1440 at a ratio of 16:9
  width = 1440 × 16 ÷ 9 = 2560
  → 2560 × 1440

Task 2: width 1080 at a ratio of 9:16
  height = 1080 × 16 ÷ 9 = 1920
  → 1080 × 1920

Task 3: width 1200 at a ratio of 3:2
  height = 1200 × 2 ÷ 3 = 800
  → 1200 × 800

Check: GCD(2560, 1440) = 160  →  16:9

When both sides are known and the goal is to fit the picture into a required ratio, cropping solves it: the excess is removed at the edges and the shortfall is filled. Counting by hand is handy for a quick estimate, and the aspect ratio calculator does the same job: it reduces the numbers you enter, shows the ratio as a decimal, and recalculates the second side from the first.

Ratio, DPI and printing

On a screen a pixel is a unit of counting rather than a physical quantity. How many pixels fit onto a metre of paper depends on the DPI, the number of dots per inch. One inch is 25.4 mm, so the conversion is a straight line.

A4 = 210 × 297 mm = 8.2677 × 11.6929 inches

72 DPI:   8.2677 × 72  = 595     11.6929 × 72  = 842
96 DPI:   8.2677 × 96  = 794     11.6929 × 96  = 1123
150 DPI:  8.2677 × 150 = 1240    11.6929 × 150 = 1754
300 DPI:  8.2677 × 300 = 2480    11.6929 × 300 = 3508

The aspect ratio does not change: 70:99

For print, 300 DPI is the usual choice: it is enough for the eye not to make out individual dots on paper. On a screen 72 or 96 is plenty, because there a pixel is physically a different thing. The A4 calculator switches between A4, A3, A5, B5, Letter and Legal, offers a DPI from 72 to 600, and also works the other way: give it pixels and it tells you the physical size. More about converting centimetres and inches is in the article about the unit converter.

The ratio by itself says nothing about print quality. The same 3:2 frame can be printed on A4 as 30×20 cm or on A3 as 42×28 cm: the proportions stay the same, but the number of dots per inch differs, and on the larger sheet the picture comes out noticeably better.

Cropping for social media and for a design

Turning a picture from one ratio into another always happens either by cropping or by adding borders. Cropping loses part of the frame, borders add background. Which one to pick depends on what matters more.

• If the whole composition matters, add borders instead: pick the background colour from the edges of the photograph so that it does not stand out.
• If the subject in the centre matters, crop around it and keep the required ratio.
• Pixel precise cropping is done by hand, and ready made ratio presets live in the image cropper: there you can set either a preset or exact coordinates.
• Changing the size without distorting the proportions and shrinking the file is what the image resizer does: it recalculates the second side from the ratio and reduces the weight of the file.

One thing is worth keeping in mind: shrinking is almost always safe, while enlarging always makes the picture worse. You can stretch 800×600 up to 1920×1080, but instead of real detail you get blurred patches. If the source is smaller than the required size, it is more honest to pick a different frame than to enlarge this one.

About cropping itself, keep one thing in mind: every crop reduces the pixel count along one of the sides, and the further the original ratio is from the one you need, the more you have to cut away. So it pays to match the format to the platform in advance rather than trimming somebody else video twenty times in a row.

Common mistakes

• Pixels and percentages get mixed up: "a ratio of 50 %" means nothing, while "a width of 50 % of the height" is 1:2.
• The size of the picture and the size of the file get confused: a 2 MB file may be 4000×3000, while a 200 KB file may be 600×450. The weight depends on compression, not on proportions.
• It is assumed that 16:9 and 16:10 are the same thing: at the same width the height differs by about 11 %, and that shows when you crop.
• Only one side of the picture is cut, and the proportions change. To keep the ratio you have to cut from both sides.
• A width in percentages is confused with an aspect ratio. In CSS a percentage width is calculated from the parent block, and the frame changes as the parent changes.

Common questions

Which aspect ratio should I pick for a YouTube video?

16:9. It is the standard full screen format that fills the whole width of the player, and YouTube widens vertical clips by adding blurred bars on the sides. Short videos in the feed are shown in the vertical 9:16 format, and many studios shoot that way, but 16:9 remains the classic choice for long material.

16:9 or 16:10 for a monitor?

It depends on the work. 16:9 gives more height for video and games, while 16:10 gives more lines of text and more table rows on the same diagonal. 16:9 is what is sold en masse today, but the ultrawide 21:9 models make sense for people who keep several windows side by side or edit long timelines.

Why is 1920×1080 called 16:9 and not 1.78:1?

Because 16:9 is the exact relation written with whole numbers, while 1.78 is its decimal approximation. Dividing 1920 by 1080 gives 1.7777..., and rounding that to 1.78 introduces a small error. Specifications say 16:9 because it is an irreducible fraction and because it can be verified with integer arithmetic.

Can an aspect ratio be changed without a loss of quality?

Cropping and filling with borders are done without a loss of quality: the frame stays the same and only its shape changes. Stretching or squashing with a distortion cannot be done without a loss, that is what a distortion means. Shrinking an image while keeping the proportions is also lossless, but enlarging is not: the pixels simply do not appear, and blurred patches take their place.

How do I work out how much room a picture takes on a page?

First find the width of the container the picture goes into, then multiply it by the numerator of the ratio and divide by the denominator. For a column 720 pixels wide at 16:9 the height works out as 720 × 9 ÷ 16 = 405 pixels. In CSS it is the same thing as setting the width to 100 % and the height to auto: the browser works it out and preserves the proportions.