One image, four crops

The ratios you will be asked for

1:1     1080 × 1080   square feed posts, avatars, thumbnails
4:5     1080 × 1350   the tallest most feeds allow for a still
9:16    1080 × 1920   stories, reels, shorts, full-screen vertical
16:9    1920 × 1080   video, slides, most screens, YouTube
3:2     e.g. 6000 × 4000   what most cameras produce
2:3     posters, book covers
1:1.414 A-series paper

The A-series entry is worth a sentence because the reason is elegant and practical. A4 is 210 × 297 millimetres, a ratio of one to the square root of two. That ratio is the only one that stays the same when you halve the sheet along its long edge — so A4 folds to A5, A5 to A6, and a layout designed for one scales to any other without reproportioning. Nothing in the imperial paper sizes works this way, which is why scaling a US Letter document to half size distorts its margins.

Designing once for several crops

The normal situation is one photograph or one composition that has to appear square in a feed, vertical in a story, and wide on a website. There are two approaches and only one of them scales.

The approach that does not: make each version by hand. It works for three assets and collapses at thirty, and every later change has to be made three times.

The approach that does: design in the tallest ratio you need, mark the safe area for the widest, and keep everything load-bearing inside the intersection.

Concretely, for a 9:16 frame of 1080 × 1920 that must also crop to 1:1 and 4:5:

• The 1:1 crop takes the central 1080 × 1080 — so 420 pixels come off top and bottom.
• The 4:5 crop takes the central 1080 × 1350 — 285 off top and bottom.
• The safe intersection is therefore the central 1080 × 1080.

Put the subject, the headline and anything else that must survive inside that central square. Everything outside it is atmosphere that some crops will lose.

Platform overlays

Separate from the crop, platforms draw their own interface over your image: a username and caption across the bottom, action buttons up the right side, a progress bar and a close button at the top.

The working margins for a 1080 × 1920 vertical frame are roughly 250 pixels clear at the bottom, 150 at the top, and 200 down the right-hand side. Those numbers move — they are a platform's current design, not a standard — but the order of magnitude is stable, and designing to them costs nothing.

The honest limitation: platforms change their crops, their overlay positions and their compression without notice, and they do not announce it to designers. Every published set of exact safe-area pixel values goes stale. The durable defence is margin: keep critical content away from all four edges by a visible amount, and it survives whatever the platform does next.

Compression, briefly

An asset uploaded to a social platform is re-encoded. Fine detail, subtle gradients and thin light text suffer most, because that is what lossy compression discards first.

Two practical consequences. Text over an image should be reasonably large and solid rather than thin and pale, because thin pale strokes are exactly what gets mangled. And a large flat gradient — a sky, a brand background — will often come back with visible banding, which is worth checking on the platform rather than in your editor.

Uploading at the platform's stated dimensions rather than larger generally gives a better result, because you control the downscale rather than their encoder.

The container ratio matters too

One thing that catches people out on the web. If a card is 16:9 and the uploaded photograph is 3:2, something has to give: the image is either letterboxed, stretched, or cropped. CSS decides this with one property:

.card img { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 30%; }

cover crops rather than distorting, which is almost always what you want, and object-position lets you bias the crop — center 30% keeps the upper third, which is where faces usually are in a portrait photograph.

Without this, the browser either distorts the image or lets the card's height vary with each upload, which breaks the channels from the negative-space lesson. Setting an explicit aspect ratio on image containers also prevents layout shift while images load, which is a measurable performance improvement and not only a visual one.