Aspect Ratios Explained: Sizing Images and Video Without Distortion
By the UtilityForge Editorial Team · Published October 22, 2026 · 5 min read
You've got a photo that's 4000 by 3000 pixels and you need it to fit a slot that's 1200 wide. How tall should it be? If you just guess, you'll squash or stretch it, and it'll look off even if people can't say why. Aspect ratio is how you avoid that.
What aspect ratio is
It's the proportional relationship between width and height, written as two numbers separated by a colon. A screen that's 1920 pixels wide and 1080 tall has a ratio of 1920:1080, which simplifies to 16:9 when you divide both by their greatest common divisor (120). Two images with the same ratio have the same shape, even if one has many more pixels.
The quick formula
To find a missing dimension when you know the ratio and one side:
- new height = new width × (ratio height ÷ ratio width)
- new width = new height × (ratio width ÷ ratio height)
For the 4000x3000 photo (a 4:3 ratio) at 1200 wide: 1200 × 3 ÷ 4 = 900 pixels tall. So 1200x900. Easy once you see it. Pixels are whole numbers, so you'll sometimes need to round, which is fine for display purposes.
Common ratios and where they're used
- 16:9 – standard widescreen. YouTube videos, most TVs, laptop screens, presentations.
- 9:16 – the same, rotated. Vertical video for Instagram Reels, TikTok, YouTube Shorts and Stories.
- 1:1 – square. Classic Instagram posts, profile pictures, some product listings.
- 4:5 – slightly tall portrait. Takes more room in the Instagram feed than a square.
- 4:3 – older TVs and monitors, many tablets, a lot of compact cameras.
- 3:2 – traditional 35mm film and most DSLR sensors; common for photo prints (6x4 inches).
- 2:3 – 3:2 turned on its side; portrait prints and Pinterest-style tall pins.
- 21:9 – ultra-wide monitors and a lot of cinema content.
Platform recommendations change over time, so double-check the latest official guidance before you export, especially for ads.
What happens when ratios don't match
You have three choices when you put an image in a frame of a different shape:
- Crop. Cut off the edges so it fills the frame. You lose some of the picture.
- Letterbox or pillarbox. Fit the whole thing inside and fill the leftover space with bars or a background colour.
- Stretch. Force it to fit. Don't do this; faces and circles look wrong straight away.
The smart move is to think about the final shape before you shoot or design. Leave extra space around the subject so you can crop to several formats later.
In web design
If you place images or videos without reserving space, the page jumps around as they load, which hurts the user experience and is measured in Core Web Vitals as layout shift. Setting width and height attributes, or using the CSS aspect-ratio property (e.g. aspect-ratio: 16 / 9), lets the browser hold the right amount of room before the file arrives.
Resolution isn't the same thing
People sometimes mix up aspect ratio and resolution. Ratio is shape; resolution is the number of pixels. 1280x720 and 3840x2160 are both 16:9, but the second is far sharper. When you scale an image up, you're not adding detail, just making the same pixels bigger.
Skip the mental arithmetic
If you do this often, a calculator saves time. Our aspect ratio calculator simplifies any width and height to a ratio, and works out the missing dimension from a ratio and one known side, with presets for the usual formats.
Keep the shape consistent, scale both sides together, and your images will look the way you meant them to.