In-browser image optimizer
The Open Graph image size
One size covers almost every link preview in use: 1200 × 630 pixels, a 1.91:1 ratio, under 300 KB. Larger images get downscaled by most platforms and smaller ones get letterboxed or cropped — so the work is in getting the composition right for that crop, not in going bigger.
Make a preview image that survives every client
- Start from 1200 × 630That is 1.91:1, which is what Facebook, LinkedIn and Slack prefer. X shows 1.91:1 in the timeline and crops to 2:1 in some placements.
- Keep text inside the middle 80%Every client crops differently, and some show a square thumbnail. Anything within the central 1080 × 566 area is safe in practice.
- Export under 300 KBMost crawlers will fetch larger images, but messaging apps on slow connections may skip them. JPEG at quality 85 keeps a 1200-pixel graphic well under the limit.
The tags that actually matter
Set og:title, og:description, og:image with og:image:width and og:image:height, and og:image:alt. Declaring the dimensions lets clients reserve space before the image loads. If you also want a large card on X, add twitter:card = summary_large_image plus twitter:image.
Why your preview did not update
Crawlers and chat clients cache previews, often for days. Bump the image URL with a version query when you change the artwork, and use each platform’s debugger to clear its cache. Caching explains almost every “the preview is wrong” report.
What to expect
| Platform | Preferred | Notes |
|---|---|---|
| Facebook / Slack | 1200 × 630 | 1.91:1, the default assumption |
| 1200 × 627 | barely different; 1200 × 630 is fine | |
| X / Twitter | 1200 × 630 | 2:1 crop in some placements |
| 1200 × 630 | square crop in the chat list | |
| Discord | 1200 × 630 | generous, will show the full image |
Questions
What size should an og:image be?
1200 × 630 pixels at under 300 KB, in JPEG or PNG. That ratio works across the major platforms without letterboxing.
Does og:image:width and height matter?
Yes. Declaring them lets clients lay out the card before the image arrives, and some scrapers will not show an image without known dimensions.
Why does my preview show the wrong image?
Almost always caching. Change the image filename or add a version parameter, then re-scrape with the platform’s debugger.