Social Image Sizes, and the One Crop That Survives Everywhere

Platforms crop, they do not letterbox

A video player that receives the wrong shape puts black bars around it. A social feed does not, because bars look broken in a scrolling column and waste the scarcest thing on the screen. It fills the slot instead, which means part of your image is not shown. Where the cut falls depends on the platform: some crop from the centre, some bias towards the top on the assumption that faces live there, some use a saliency model. You cannot control which, and you should not design against any one of them.

That is the case for a safe area. If your subject — a face, a headline, a logo, a price — is inside the region that survives every crop the image will meet, the platform's choice stops mattering. The question is how large that region is, and it turns out to have an answer clean enough to memorise.

The safe area is the narrowest ratio divided by the widest

Write the source aspect ratio as width over height and call it r. A target slot of ratio t crops it. If t is wider than r, the crop keeps the full width and takes a horizontal band of the height; the vertical fraction that survives is r divided by t. If t is narrower than r, the crop keeps the full height and takes a vertical band of the width; the horizontal fraction that survives is t divided by r. Across a whole set of targets, only the extremes bind: horizontally you are limited by the narrowest target, vertically by the widest.

So the surviving width fraction is the narrowest target divided by r, and the surviving height fraction is r divided by the widest target — each capped at one, since a crop cannot show more than the whole image. Multiply them for the area and the r cancels exactly: the safe area is the narrowest target ratio divided by the widest, and it does not depend on the shape of the source at all, as long as the source sits between the two extremes. That is the result worth carrying around, and it is not published anywhere.

Put numbers in it. A realistic set for a brand that posts to a vertical video format, a portrait feed, a square, a landscape video and a link preview runs from 9:16 at the narrow end to 1.91:1 at the wide end. That is 0.5625 divided by 1.91, or 29.45%. Fewer than three pixels in ten of what you designed are guaranteed to be seen. Drop the vertical video format and the range becomes 4:5 to 1.91:1, giving 41.88%. Design only for square and link previews and you get 52.36%. Go the other way and use a 2.35:1 cinematic source, which is wider than every target, and you fall to 23.94%; a 3:1 banner falls to 18.75%.

The same result in pixels

On a square canvas 1080 pixels on a side, the safe box for the full 9:16 to 1.91:1 range is 608 by 565 pixels — 29.45% of the area, exactly as the formula says. On a 4:5 portrait canvas of 1080 by 1350 it is 759 by 565. On a 1200 by 628 link-preview canvas it is 353 by 628. On a 1080 by 1920 vertical canvas it is 1080 by 565. Four different canvases, four different boxes, and the same 29.45% every time.

The recurring 565 is not a coincidence. The safe height is the canvas width divided by the widest target ratio, and 1080 divided by 1.91 is 565.4. Anything you want to survive a 1.91:1 crop has to live in a horizontal band 565 pixels tall, whatever else you do. Similarly the safe width is the canvas height multiplied by the narrowest target ratio, which is why the vertical canvas loses nothing horizontally at all.

One elegant corollary: the safe box's own aspect ratio is the narrowest target times the widest, divided by the source ratio. Set that equal to one and you get a square safe zone exactly when the source sits at the geometric mean of the two extremes — the square root of 0.5625 times 1.91, which is 1.0365 to 1, essentially a square. So if you want the largest square safe zone across the widest range of placements, design on a canvas that is very slightly wider than tall.

Upload dimension, display dimension, and the retina multiplier

Three different numbers get called "the size". The upload dimension is what you send. The display dimension is how many CSS pixels wide the slot is on the reader's screen. The device pixel ratio multiplies the second to get the number of real pixels the screen has available. A 360 CSS-pixel-wide slot needs 720 device pixels on a two-times screen and 1,080 on a three-times screen — which is exactly why 1080 keeps appearing in guidance and why sending less than that produces something visibly soft on a modern phone.

The published dimensions that exist are worth knowing and worth dating. Meta's sharing documentation says to use images at least 1200 by 630 pixels for high-resolution devices, gives 200 by 200 as the minimum allowed dimension, asks you to stay as close to a 1.91:1 aspect ratio as possible so the image is not cropped in feed, and caps the file at 8 MB. Instagram's own help documents that a photo between 320 and 1080 pixels wide keeps its original resolution provided the aspect ratio sits between 1.91:1 and 4:5. Both of those are current at the time of writing and both will change; the ratios in them are the durable part.

Compression, and what it does to text in an image

Every platform re-encodes what you upload, at a quality setting it does not publish and changes without announcement. Lossy compression is hardest on exactly the content marketers put in images: sharp edges between two flat colours, which is what type is. A photograph loses detail you were never looking at; a caption gains a halo you can see.

The resizing step compounds it, and this part is arithmetic rather than guesswork. Design a 48-pixel caption on a 1080-wide canvas and it arrives at 48 pixels. Design the same 48-pixel caption on a 1440-wide canvas and, after a downscale to 1080, it arrives at 36. On a 2160-wide canvas it arrives at 24 — half the size you drew, and the size at which a thin weight stops being legible on a phone held at arm's length. Working larger for safety is the exact opposite of safe if the platform normalises the width.

The link preview is a different ratio again

The Open Graph protocol itself defines the properties — og:image, og:image:width, og:image:height, og:image:type, og:image:alt — and specifies no pixel dimensions at all. The 1.91:1 shape that every unfurler now uses came from Facebook's own sharing guidance, which recommends staying as close to that ratio as possible and using at least 1200 by 630 pixels. Everything else inherited it because matching the dominant platform was easier than negotiating.

For the safe-area calculation the link preview matters more than its share of traffic suggests, because at 1.91:1 it is the widest ratio in most sets, and the widest ratio is what sets the height of the safe box. Remove it and the whole calculation improves: a set running from 4:5 to 16:9 has a safe area of 45.00% rather than 41.88%, purely because 16:9 is narrower than 1.91:1. If your preview image is authored separately from your social image — which it should be, since one is a card and the other is a post — you can drop 1.91:1 from the set the social image has to survive, and that single decision is worth more than any amount of careful cropping.

Frequently asked questions

What percentage of my image is guaranteed to be visible?

The narrowest aspect ratio it will be shown at, divided by the widest. That is the whole answer, and it is independent of the shape you designed on as long as that shape falls between the two. From a 9:16 vertical placement up to a 1.91:1 link preview, it is 29.45%. From 4:5 up to 1.91:1, 41.88%. From square up to 1.91:1, 52.36%. From 4:5 up to 16:9, 45.00%. Design outside the range and it gets worse rather than better: a 2.35:1 cinematic source drops to 23.94% and a 3:1 banner to 18.75%.

Which canvas should I design on if I only want to make one image?

Any shape between the narrowest and widest placements gives the same safe area, so the choice is about which direction you want the wasted margin to run, not about how much you keep. If you want the safe zone itself to be square, design at the geometric mean of your extremes: for a 9:16 to 1.91:1 range that is 1.0365 to 1, essentially a square canvas, which yields a 608 by 565 safe box inside 1080 by 1080. If most of your placements are portrait, a 4:5 canvas of 1080 by 1350 gives a wider safe box, 759 by 565, at the same 29.45%. Just do not go outside the range: wider than your widest placement or narrower than your narrowest and you lose area for nothing.

Why do published pixel dimensions keep changing?

Because they are a consequence of a product decision, not a standard. A platform widens its feed column, adds a format, changes how it handles a taller crop, or ships a new screen density target, and every recommended size downstream moves. That is why an article that hard-codes this year's numbers is stale within a year, and why this one is built on ratios. The dimensions worth knowing are the ones a platform documents itself and dates: Meta currently asks for at least 1200 by 630 with a 200 by 200 minimum, an 8 MB cap and a shape as close to 1.91:1 as possible, and Instagram currently keeps original resolution for widths between 320 and 1080 when the ratio sits between 1.91:1 and 4:5. Check both before you use either.

Should I upload a larger image than the recommended width?

Only up to the point where the platform stops keeping your resolution, and never for text. Uploading beyond the width a platform normalises to means it downscales, and a downscale shrinks type in exact proportion: a 48-pixel caption designed on a 1440-wide canvas arrives at 36 pixels after resizing to 1080, and on a 2160-wide canvas at 24. Design at the width the platform preserves, size your type against that width, and remember that the display width in CSS pixels is smaller again — a 360-point slot on a three-times screen consumes exactly 1080 device pixels, which is why that number keeps recurring.

Can I use the same image for a social post and a link preview?

You can, and it costs you real area. The link preview is the widest ratio in most sets at 1.91:1, and the widest ratio is what caps the height of your safe box — 1080 divided by 1.91 is 565 pixels, which is where that recurring number comes from. Drop the link preview and a set running from 4:5 to 16:9 has a safe area of 45.00% instead of 41.88%; drop the vertical video format too and square-to-1.91:1 gives 52.36%. Since a preview card and a feed post have different jobs anyway, authoring them separately is usually the better answer, and it improves the geometry for free.