Image Aspect Ratios Explained
An aspect ratio is the shape of an image: its width compared to its height, written as two numbers with a colon. 16:9 means sixteen units wide for every nine tall, whatever the units are. A 1920×1080 video, a 1280×720 thumbnail and a 16-by-9-inch print all share that shape. Size and shape are independent. Most image problems, like stretched faces, black bars and heads cropped off in a preview, come from mixing them up.
How to work out an aspect ratio
Divide width and height by their greatest common divisor. For 1920×1080 that number is 120, giving 16:9. For 3000×2000 it is 1000, giving 3:2. Some sizes reduce to awkward numbers: 1366×768 becomes 683:384, which is close enough to 16:9 that everyone calls it that. The decimal form, width divided by height, is often more useful for comparisons: 16:9 is 1.78, 4:3 is 1.33, and a square is exactly 1. The Aspect Ratio Calculator does the division and tells you the nearest standard ratio.
The same arithmetic tells you a missing dimension. To make a 16:9 image 1200 pixels wide, multiply 1200 by 9/16 to get 675 pixels tall. Going the other way, a 1350-pixel-tall 4:5 image is 1350 × 4/5 = 1080 wide.
The common ratios and where they came from
| Ratio | Decimal | Origin | Used for today |
|---|---|---|---|
| 4:3 | 1.33 | Early film and television | Phone camera sensors, iPads, presentations |
| 3:2 | 1.5 | 35mm film (36×24mm frame) | DSLR and mirrorless cameras, 6×4 inch prints |
| 16:9 | 1.78 | HDTV standard, a compromise between 4:3 and cinema widths | Video, monitors, YouTube, slides |
| 1:1 | 1 | Medium-format film, later Instagram | Profile pictures, product photos, feed posts |
| 4:5 | 0.8 | 8×10 inch prints | Instagram and Facebook portrait posts |
| 9:16 | 0.56 | 16:9 turned on its side | Stories, Reels, TikTok, YouTube Shorts |
| 1.91:1 | 1.91 | Link-preview card layouts | Open Graph images (1200×630) |
| 21:9 / 2.39:1 | 2.33–2.39 | Widescreen cinema | Ultrawide monitors, film-look video |
Note the mismatch hiding in the first two rows: most phones shoot 4:3, while dedicated cameras shoot 3:2. That is why phone photos get cropped when ordered as standard 6×4 prints, and why camera photos get cropped on an iPad.
Which aspect ratio should you use?
- Video and YouTube thumbnails: 16:9. Thumbnails are usually 1280×720.
- Vertical video and stories: 9:16 at 1080×1920. Keep text and faces out of the top and bottom areas, where app interfaces overlap.
- Feed posts: 4:5 takes up the most screen height on phones, which is why it is popular; 1:1 is the safe choice that never gets cropped in grids.
- Link previews: 1.91:1 at 1200×630 for the
og:imagethat appears when your page is shared. - Website hero images: there is no fixed answer, because the container changes with screen width. Design for a wide ratio such as 16:9 or 21:9 on desktop and check what a narrow phone crop leaves visible.
- Prints: match the paper. 6×4 is 3:2, 10×8 is 5:4, A-series paper (A4, A3) is 1:1.414.
Platform specifications change from time to time, so check the current guidance before a large campaign, but these ratios have been stable for years.
How to change an aspect ratio without distortion
There are three ways to fit an image into a new shape, and only two of them are good:
- Crop. Cut away the edges until the shape matches. Nothing is distorted; you choose what to lose. Use the Image Cropper with a ratio preset, position the box over the subject, and crop.
- Pad. Keep the whole image and add bars or a blurred background to fill the new shape. Common for fitting a horizontal photo into a vertical story.
- Stretch. Resize width and height by different amounts. Faces get wide, circles become ovals, and viewers notice immediately. Avoid it.
After cropping, resize to the exact pixel size you need with the Image Resizer, keeping its aspect-ratio lock on. Crop first, then resize: the order means you compose the shot at full resolution and only throw away pixels once.
Aspect ratios on the web
When an image loads after the text around it, the page jumps, which counts against you in Core Web Vitals as Cumulative Layout Shift. Browsers prevent it if they know the shape in advance: set the width and height attributes on the <img> tag, or use the CSS aspect-ratio property on embeds and containers, for example aspect-ratio: 16 / 9;. To crop an image to a shape in CSS without editing the file, combine aspect-ratio with object-fit: cover. The calculator outputs the CSS line ready to paste.
Quick reference
Shape is the ratio; size is the pixel count; changing one does not have to change the other. Get the ratio right by cropping, get the size right by resizing, and keep the file small with the Image Compressor. If the image is headed for print rather than a screen, our guide to DPI vs PPI covers how many pixels each print size needs.