Aspect ratios explained: 1:1, 4:5, 9:16, 16:9 and more

An aspect ratio is the shape of an image: its width compared with its height, written as two numbers such as 16:9. A 1920×1080 video and a 1280×720 thumbnail have different sizes but the same 16:9 aspect ratio, so one scales into the other without cropping. Most design problems with "the wrong size" are really problems with the wrong shape.

The common aspect ratios and where they are used

The exact pixel sizes for every platform are in social media image sizes. Notice how few shapes there are: if you can design well in 1:1, 4:5, 9:16 and 16:9, you can cover most of a brand's social presence.

How to work out an aspect ratio

Take the width and height and divide both by the largest number that goes into each exactly, called the greatest common divisor. What is left is the ratio in its simplest form.

1. 1

   Start with the size

   Say 1080×1350, a portrait Instagram post.

2. 2

   Find the greatest common divisor

   The largest number that divides both 1080 and 1350 exactly is 270.

3. 3

   Divide both sides

   1080 ÷ 270 = 4 and 1350 ÷ 270 = 5. The aspect ratio is 4:5.

4. 4

   Or use a decimal

   Divide width by height: 1080 ÷ 1350 = 0.8. Decimals are handy for awkward shapes such as 1200×630, which is about 1.91, hence 1.91:1.

If you'd rather not do it by hand, these few lines of JavaScript do the same thing in a browser console.

const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b));

function aspectRatio(width, height) {
  const d = gcd(width, height);
  return `${width / d}:${height / d}`;
}

// Height for a new width, keeping the same shape
const heightFor = (newWidth, w, h) => Math.round((newWidth * h) / w);

aspectRatio(1920, 1080); // "16:9"
aspectRatio(1080, 1350); // "4:5"
heightFor(1280, 16, 9);  // 720

Converting sizes without changing the shape

To scale an image and keep its aspect ratio, use one formula: new height = new width × ratio height ÷ ratio width. For a 16:9 frame 1280 pixels wide, that is 1280 × 9 ÷ 16 = 720. For a 4:5 frame 1600 pixels wide, it is 1600 × 5 ÷ 4 = 2000.

Working the other way is just as simple: new width = new height × ratio width ÷ ratio height. A 9:16 video that must be 1280 tall is 1280 × 9 ÷ 16 = 720 wide. If the answer comes out with a decimal, round to the nearest whole pixel; the difference is invisible.

What happens when you change the aspect ratio

Scaling keeps the shape. Changing the ratio does not, and you have only three honest options: crop part of the image away, add space around it, or rearrange the design for the new shape. The fourth option, stretching, distorts every letter and circle, and people notice at once.

This is what resizing in Gradiently does with Pro: pick the sizes you need and each copy is laid out again for its shape, while the Mark behind it renders fresh at every ratio rather than being cropped from one image. One look, every size walks through it.

Which aspect ratio to choose for a post

When a platform accepts several shapes, pick the one that takes up the most room on a phone screen. On Instagram that is 4:5, which is taller than a square and survives the profile grid crop best; Instagram post size explains why. On Pinterest, a 2:3 pin is the standard; longer pins exist but can be cut short in the feed, as covered in Pinterest pin size.

For anything watched on a television or laptop, 16:9 is the safe choice, which is why YouTube thumbnails and slides use it. For anything watched full screen on a phone, 9:16 is the only shape that fills it. When in doubt, design the vertical and the widescreen versions first: the square and portrait sit comfortably between them.

Aspect ratio in CSS

On the web, the CSS aspect-ratio property keeps a box in shape at any width, which stops layouts jumping while images and videos load. It is supported in all current browsers; see MDN's aspect-ratio reference.

.hero {
  aspect-ratio: 16 / 9;
  width: 100%;
  background: linear-gradient(135deg, #1e1b4b 0%, #6d28d9 60%, #f472b6 100%);
}

.card-image {
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover; /* crops to fill rather than stretching */
}

Ratios also matter for print and video, with their own conventions. For video formats see social video sizes, and for how pixel counts relate to physical size, DPI vs PPI.