Every platform has a shape it wants. YouTube wants 16:9, Reels and TikTok want 9:16, Instagram feed posts look best at 4:5, LinkedIn link previews want roughly 1.91:1. Get it wrong and the platform decides for you: a head cropped off a thumbnail, gray bars beside a product photo, a video playing in a small letterboxed window.
The arithmetic is trivial and annoying. You know the width is 1920 and the ratio is 16:9, and you still reach for a calculator to get 1080. The Aspect Ratio Calculator exists for exactly that: one dimension in, the other out, with the common ratios as presets. This post covers what the ratios mean, what each platform wants right now, and how to change shape without wrecking the picture.
A ratio is a shape, not a size
16:9 means sixteen units of width for every nine of height. 1920x1080, 1280x720, 3840x2160 and 640x360 are all 16:9: the same shape at different sizes. The notation is width and height divided by their largest common factor, so 1920:1080 reduces to 16:9. Some do not reduce neatly. Facebook's 1200x628 link image is about 1.91:1, which is why you see decimals as well.
The ones you will meet:
- 16:9, widescreen. YouTube, desktop video, slides.
- 9:16, vertical. TikTok, Reels, Shorts.
- 4:3, old television and older monitors. Still turns up in projectors.
- 1:1, square. Profile pictures, and an option for feed posts.
- 4:5, tall. Instagram feed, Pinterest.
- 21:9, ultra-wide. Film and ultra-wide monitors.
- 2:3, portrait photos and the 4x6 inch print.
To get the missing side: height = width x 9 / 16 for 16:9, and so on. 1080 wide at 9:16 is 1920 high. The calculator does the division and rounds to whole pixels, which matters more than it sounds, because 1000 wide at 16:9 is 562.5 high and nobody can export half a pixel.
What the platforms want, as of 2026
These move, so treat the list as a starting point and check the platform's own page for anything that matters.
- YouTube: thumbnails 1280x720 (16:9); video 1920x1080 or 3840x2160; Shorts 1080x1920.
- Instagram: feed 1080x1350 (4:5), which fills the most screen; Stories and Reels 1080x1920; carousels 1080x1080 or 1080x1350.
- TikTok: 1080x1920. Anything else gets a blurred copy of itself as the background, which looks like a mistake.
- LinkedIn: shared images 1200x627; video 1920x1080 landscape or 1080x1920 vertical.
- X: single images 1600x900; several images get cropped to whatever the layout needs.
- Pinterest: 1000x1500 (2:3); video pins 1080x1920.
Make one source at the largest size you will need, then cut each platform's version from it with the Image Cropper. Down is easy. Up invents pixels.
These move, so treat the list as a starting point and check the platform's own page for anything that matters.
Resize and crop are different operations
Resizing keeps the shape and changes the size. 3000x2000 to 1500x1000 is the same picture, smaller.
Cropping changes the shape by throwing part of the picture away. 3000x2000 (3:2) to 2000x2000 (1:1) loses 500 pixels on each side. Nothing is distorted, but what is in the frame changes.
The mistake is forcing a new shape without cropping. Stretch a 4:3 image into a 16:9 frame and everyone in it gets wider and every circle becomes an oval. The alternative, letterboxing, keeps the picture and wastes the space.
The order that works: start from the largest original you have, crop to the target ratio with the crop box positioned on the subject, then resize to the target pixels. The Image Cropper does the first step in the browser, and the Image Resizer the second.
In CSS, set the ratio on the box
A grid where every image is the same shape looks planned. One where the shapes vary looks like nobody checked. CSS has a property for it:
`css
.thumbnail img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
`
The box stays 16:9 at every viewport width, and object-fit: cover fills it by cropping rather than stretching. For a responsive gallery, combine it with a grid:
`css
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.gallery img {
aspect-ratio: 4 / 3;
width: 100%;
object-fit: cover;
border-radius: 8px;
}
`
The CSS Grid Generator writes the column and gap rules; the aspect ratio line keeps the cells the same shape when the column count changes. It is also the cheapest fix for layout shift, because the browser knows the height of the image before the file arrives.
Video: shoot for the crop you will make
Cameras shoot 16:9 by default. If the video is going to Reels or TikTok, shooting vertical from the start beats cropping a landscape frame later.
When one recording has to serve both:
- Keep the subject in the middle third of the frame, so a 9:16 crop from a 16:9 recording still has them in it.
- Use the safe-zone overlay in the editor and keep faces, text and products inside it. Each platform draws its own buttons over the edges.
- Set the timeline to the output ratio before editing. Editing in 16:9 and exporting 9:16 at the end produces framing problems you never saw.
- Watch it on a phone before publishing. A desktop monitor hides what a phone screen shows.
- For anything that matters, export both versions and reframe each, rather than cropping one from the other.
Print uses different shapes again
Print sizes have their own ratios: 4x6 inch is 2:3, 5x7 is 5:7, 8x10 and 16x20 are 4:5, 11x14 is 11:14. None of them is 16:9, and phone photos are 4:3 or 16:9, so any standard print is a crop. Photographers deliver at full resolution in the camera's ratio and let the printer crop to the ordered size.
For print, resolution is the number that matters. At 300 dots per inch, a 4x6 inch print needs 1200x1800 pixels; ask the printer for their minimum before preparing files. On screen, the pixel count is all there is, and the DPI figure in the file header changes nothing.
If one source has to serve print and web, prepare the print version first (larger, cropped to the print ratio) and resize down for the web. The other direction asks for detail that is not there.
Print sizes have their own ratios: 4x6 inch is 2:3, 5x7 is 5:7, 8x10 and 16x20 are 4:5, 11x14 is 11:14.
FAQ
What happens if I upload the wrong ratio?
The platform letterboxes or crops. YouTube adds bars, Instagram crops to the center, TikTok blurs a copy of the video behind it. None of them looks as good as the right shape uploaded in the first place.
Can I change the ratio without cropping?
Only by stretching, which distorts, or by padding, which adds empty space. Generative fill in Photoshop and similar tools can invent an extension, and the result depends entirely on what is at the edges.
Which ratio for a website hero image?
There is no single answer. 16:9, 21:9 and 3:1 are all common. Set aspect-ratio in CSS so the box adapts to the container instead of a fixed pixel size, and pick the crop so the subject survives at phone width.
Why does the platform show my image differently from what I uploaded?
It applies its own crop depending on how many images you attached, the device and the placement. Matching the recommended size exactly is the only reliable way to keep control.
Contrast Ratio: The Accessibility Failure on Four Out of Five Home Pages, and the Five-Second Check
Low-contrast text is the most common WCAG failure there is. What the 4.5:1 and 3:1 thresholds mean, why your eyes are a bad judge, the five places designs fail, and how to build a palette where every pairing already passes.
Color Blind Simulator: Why the Red and Green in Your Status Column Read the Same to One Man in Twelve
One in twelve men cannot tell your red from your green. What the four kinds of colour vision deficiency do to a screen, the patterns that fail, the palette that does not, and a five-step test that fits in a design review.
Photo Editing in the Browser: What Runs on Your Machine, What Uploads, and Where AI Helps
The four edits most photos need (crop, resize, adjust, compress) run entirely in the browser now. Which AI edits are worth it, which ones upload your photo to a server, how to tell the difference in ten seconds, and the order that keeps the file small.
Product Photo Editing in the Browser, and Where It Stops
Crop, resize, compress and convert product photos for Amazon, Shopify, Etsy and eBay with free browser tools, the current image rules per platform, and the three jobs (background, colour, retouching) that still need a real editor.