Aspect ratios explained: web, video and social
Design · 5 min read
An aspect ratio is just the relationship between an image or frame's width and height, but getting it wrong is one of the most common ways design work looks slightly off. Cropped faces, letterboxed thumbnails and stretched logos almost always trace back to a mismatched aspect ratio somewhere upstream.
How aspect ratios are written and read
An aspect ratio is written as two numbers separated by a colon, such as 16:9, describing width relative to height. A 16:9 frame is wider than it is tall, a 1:1 frame is square, and a 9:16 frame is taller than it is wide, which is simply 16:9 rotated.
The actual pixel dimensions can vary as long as the ratio between them stays the same. A 1920 by 1080 video and a 1280 by 720 video are both 16:9, and scaling between them keeps the frame looking identical, just at a different resolution.
16:9 and the standard video landscape
16:9 has been the dominant standard for video for well over a decade, covering everything from television broadcasts to YouTube uploads to most laptop screens. If you are producing a single video master and only have room to optimise for one shape, 16:9 remains the safest default for widest playback compatibility.
When exporting thumbnails or preview frames for a 16:9 video, keep important content, particularly faces and text, away from the very edges of the frame, since some platforms crop thumbnails slightly differently across devices.
9:16 and the rise of vertical video
9:16 is simply 16:9 turned on its side, and it now dominates short-form video on platforms built around full-screen phone viewing. Content shot specifically for 9:16, rather than a 16:9 clip cropped down afterwards, almost always performs and looks better, because framing decisions made for a wide shot rarely translate cleanly to a tall one.
If you must convert 16:9 footage to 9:16 after the fact, plan for significant loss of width, and consider whether a blurred or extended background fill either side of a centred crop looks better than an aggressive close crop that cuts off part of the subject.
1:1 square format and where it still matters
The 1:1 square format had its biggest moment when many social feeds were primarily square-first, and while several platforms have since shifted towards vertical formats, square still works well for feed posts that need to look consistent whether viewed on a wide desktop feed or a narrow phone screen.
Square crops are particularly forgiving for product photography and portrait-style images, since they avoid the awkward extra empty space that a very wide or very tall crop can introduce around a centred subject.
4:5 and other social-specific ratios
Several platforms favour a 4:5 ratio for feed images, which is slightly taller than square and takes up more vertical space on a scrolling phone feed, generally improving visibility compared with a 1:1 or 16:9 post in the same feed. Story and full-screen formats on most platforms use something close to 9:16.
Because these specific ratios shift periodically as platforms update their recommended formats, it is worth checking a platform's current guidance before a major campaign rather than assuming last year's dimensions still apply exactly.
Aspect ratio in responsive web layout
On the web, the CSS aspect-ratio property lets you lock an element, such as a video embed or an image container, to a specific ratio while its actual pixel size still responds to the surrounding layout. This avoids the older, clumsier technique of using a padding percentage hack to fake a fixed ratio.
This matters most for preventing layout shift: reserving the correct aspect ratio for an image or video before it finishes loading stops the rest of the page from jumping around as content resolves, which also benefits page performance scoring.
Cropping without losing the important part of an image
When converting an image between aspect ratios, identify the actual subject you cannot lose, whether that is a face, a logo or a key piece of text, and make sure it survives every planned crop rather than only the original ratio. Compose original photography with some extra space around the subject specifically so it has room to be cropped later without awkward results.
An aspect ratio tool that lets you preview a crop at several target ratios side by side is much faster than exporting separate test crops manually for every platform you need to support.
Avoiding stretched or squashed images
A very common and entirely avoidable mistake is forcing an image into a container with a different aspect ratio than the source, which stretches or squashes it rather than cropping it. Always crop to match the target ratio, never resize both dimensions independently to fit a mismatched box.
If a design system component has a fixed aspect ratio, such as a 3:2 card thumbnail, make image cropping to that ratio part of the upload or content pipeline itself, rather than leaving it to whichever image happens to be uploaded on a given day.
Planning multi-format content from the start
If a piece of content, such as a hero photo or a promotional video, will need to appear at multiple aspect ratios across a website and various social platforms, decide the full list of required ratios before shooting or designing, not after. Composing with enough surrounding space for the widest and tallest required crops from the outset avoids expensive reshoots or awkward last-minute crops later.
Common questions
- What is the difference between 16:9 and 9:16?
- They describe the same shape rotated ninety degrees. 16:9 is wide, used for most standard video and desktop screens, while 9:16 is tall, used for full-screen vertical video on phones. Content shot for one rarely crops cleanly into the other.
- Which aspect ratio should I use for social media images?
- It depends on the platform and format: square 1:1 and the slightly taller 4:5 both work well for feed posts, while 9:16 is standard for stories and full-screen vertical video. Check the specific platform's current guidance, since recommended ratios do shift over time.
- How do I stop images stretching when I resize them?
- Always crop an image to match the target aspect ratio rather than resizing width and height independently to fit a differently shaped container. Stretching happens specifically when both dimensions are scaled to fit a mismatched box instead of cropping to the correct ratio first.
- How does the CSS aspect-ratio property help with page performance?
- It reserves the correct amount of space for an image or video element before the content has finished loading, which prevents the rest of the page from shifting once it arrives. This reduces layout shift, which is one of the metrics used to judge page loading experience.
- How can I check how an image will look at different aspect ratios before exporting?
- Use an aspect ratio tool to preview crops at several target ratios side by side before committing to an export. This is much faster than manually creating and comparing separate cropped files for every platform or placement you need to support.