This is the deep, technical reference on Open Graph image dimensions: what the numbers mean, why they are what they are, and how a single image behaves when each platform reframes it. If you just want the quick numbers, grab the OG image size cheat sheet and you are done. If you want to understand why 1200x630 wins, why you should declare width and height, and why your export is 2400x1260, keep reading.

Declare width and height (and why it matters)

og:image is the only required tag for the picture itself, but two optional companions earn their keep:

<meta property="og:image" content="https://example.com/og/post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Declaring og:image:width and og:image:height does two useful things:

It lets a scraper reserve layout space before the image downloads. The unfurl can lay out the card immediately instead of waiting to measure the file, which reduces flicker and reflow in the feed.
It helps the platform decide which card to render. When a scraper knows the dimensions up front, it can confidently pick the large summary card instead of falling back to a small thumbnail while it waits to confirm the image is big enough.

These tags do not resize anything. They describe the actual pixel dimensions of the file at the URL. If you declare 1200x630 but ship a 600x315 image, you have lied to the scraper and the result is unpredictable. Always make the declared numbers match the file exactly.

Aspect-ratio math in plain terms

Three ratios cover essentially everything. The ratio, not the absolute pixel count, is what determines how an image is framed.

1.91:1 is the wide landscape rectangle used by Open Graph, Facebook, and LinkedIn. 1200 / 630 = 1.905, which platforms round to 1.91:1. LinkedIn's 1200x627 is the same ratio for practical purposes.
16:9 is X's large card. 1200 / 675 = 1.777, and up to 1600x900 is valid. It is slightly taller than 1.91:1.
1:1 is the square (1080x1080), used by Instagram-style feeds and some in-app crops.

The gap between 1.91:1 and 16:9 is small but real. A 1200x630 design is 1.91:1; a true 16:9 frame is a touch taller. When X displays your 1.91:1 image in a 16:9 slot, it does not stretch the picture: it reframes by adding a sliver of padding or trimming a sliver of width, depending on the surface.

What happens to a 1200x630 design when a platform reframes it

| Source design | Shown as | What the platform does | | --- | --- | --- | | 1200x630 (1.91:1) | 1.91:1 card (Facebook, LinkedIn, Slack) | Shows it as-is. No reframing. | | 1200x630 (1.91:1) | 16:9 card (X large) | Reframes to a slightly taller box; minor padding or edge trim. | | 1200x630 (1.91:1) | 1:1 square crop | Crops the left and right; only the center ~630px-wide column survives. |

The takeaway: design for the wide 1.91:1 frame, but keep every important element, the headline, the logo, the focal point, inside a centered safe zone. Treat the outer ~10% on each edge as expendable. A 1.91:1 image with centered content survives the move to 16:9 and even a square crop without losing anything that matters.

The 2x / retina rule

This is the dimension rule people miss most often. There are two numbers in play, and they are not the same:

Design dimensions are the logical size you lay out and reason about: 1200x630.
Export dimensions are the actual pixels in the file you ship: 2400x1260.

You design at 1200x630 because that is the canvas every platform describes and reasons about. You export at 2x (double in each direction) because phones and laptops have high-density displays that pack two or more physical pixels into each CSS pixel. An image rendered at exactly 1200x630 looks soft on those screens, especially on thin text and crisp logos. Rendering at 2400x1260 and letting the browser scale it down to fit gives you a sharp result everywhere.

The math is simple: 1200 x 2 = 2400, 630 x 2 = 1260. The aspect ratio is unchanged (2400 / 1260 is still 1.905), so nothing reframes differently. You are shipping the same picture at higher resolution.

A practical question this raises: what do you put in og:image:width and og:image:height? Use the actual file dimensions, which means the exported ones. If your file is 2400x1260, declare 2400 and 1260. The ratio is identical, the platform renders the large 1.91:1 card, and the extra pixels just make it crisp.

FreeOGImage handles this for you. You work on a 1200x630 canvas and it exports at 2x automatically, so a 1200x630 design comes out as a 2400x1260 PNG.

Minimum dimensions: stay above the small-card threshold

Platforms switch between a big, attention-grabbing card and a tiny side thumbnail based partly on how large your image is. Ship something too small and you get demoted to the small card no matter how good the artwork is.

Avoid images under about 600px wide. Below roughly that width, several platforms treat the image as a small/summary thumbnail rather than a large card. X in particular wants real dimensions before it commits to summary_large_image.
Stay comfortably above the floor. 1200x630 (or its 2400x1260 export) is well clear of any minimum, which is another reason it is the safe default.
Bigger is fine within reason. X accepts up to 1600x900. Just keep the file under 5 MB so scrapers do not skip it.

If you want to confirm a platform is reading your image as the large card and not silently downgrading it, paste the live URL into the checker and preview and validate your tags before you share it anywhere.

Exact-pixel reference

A compact lookup for the dimensions that actually matter. Design at the left column; ship the 2x export.

| Use case | Design size | Ratio | 2x export | | --- | --- | --- | --- | | Open Graph default | 1200x630 | 1.91:1 | 2400x1260 | | Facebook | 1200x630 | 1.91:1 | 2400x1260 | | LinkedIn | 1200x627 | ~1.91:1 | 2400x1254 | | X / Twitter (large) | 1200x675 (up to 1600x900) | 16:9 | 2400x1350 | | Square | 1080x1080 | 1:1 | 2160x2160 |

If you only make one image, make the 1200x630 default; it is read by Facebook, LinkedIn, Slack, Discord, WhatsApp, iMessage, and nearly everything else that unfurls a link.

Common dimension mistakes

A checklist of the dimension-specific errors that bite people most:

Wrong aspect ratio. Shipping a 16:10 or 4:3 image and expecting a clean landscape card. Platforms will crop or letterbox it. Pick 1.91:1, 16:9, or 1:1 and commit.
Width/height tags that lie. Declaring 1200x630 while serving a different-sized file. The numbers must match the actual pixels.
Exporting at 1x. A flat 1200x630 file looks soft on retina screens. Export at 2x.
Going too small. Anything under ~600px wide risks being shown as a tiny thumbnail.
Confusing design size with export size. 1200x630 is what you design; 2400x1260 is what you ship. Both are correct; they describe different stages.
Forgetting the URL must be absolute. This is not strictly a dimension issue, but a perfectly sized image at a relative path still shows up blank. og:image must be an absolute https:// URL, the single most common reason previews break. If yours is blank, see why your link preview looks broken.

How this fits with the cheat sheet

Think of it this way: the OG image size cheat sheet is the quick lookup table you bookmark. This post is the companion reference that explains the mechanics behind those numbers, the width/height tags, the ratio math, the 2x rule, and the minimums, so you can reason about edge cases instead of memorizing them.

Everything in FreeOGImage runs client-side: no signup, no watermark, and nothing you make is uploaded anywhere. Browse templates for a head start, or read more guides on the blog.

Want a correctly sized, retina-sharp 1200x630 image that exports to 2400x1260 in a minute? Open the editor and start from the minimal type template.

OG image dimensions: width, height, and the 2x rule explained