Sizes · 6 min read
Twitter card image size for X
The right image size for X cards: 1200 x 628 for summary_large_image, a square for summary, plus the tags, safe areas, and common cropping fixes.
Updated
The short answer
For X's summary_large_image card, use 1200 x 628 pixels with a 1.91:1 ratio. A 1200 x 630 Open Graph image works too. For the compact summary card, use a square image around 400 x 400. Keep the file under 5 MB (under 1 MB is safer), use JPG, PNG, or WebP, and add twitter:card, twitter:title, twitter:description, and twitter:image to the page head.
- Large card
- 1200 x 628 px (1.91:1)
- Summary card
- 400 x 400 px (1:1)
- File limit
- 5 MB, target under 1 MB
- Formats
- JPG, PNG, WebP
- Card tag
twitter:card- Fallback
- Open Graph tags
X reads Open Graph tags as a fallback, but the twitter:* tags control the card. That is why a page can have a perfect Facebook preview and a blank or badly cropped card on X. The fix is usually two lines: choose the card type and point twitter:image at the right file.
The two card types
| Card | Image size | Ratio | When to use it |
|---|---|---|---|
summary_large_image | 1200 x 628 px | 1.91:1 | Articles, launches, and pages with a purpose-built wide card |
summary | 400 x 400 px | 1:1 | Profiles, small utilities, and pages without a wide image |
The large card is almost always the right choice for content. It gives the headline room and makes the link look like an article rather than an attachment. The compact card is useful when the image is a logo or an avatar, because it does not stretch a square into a wide container.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A clearer way to ship" />
<meta name="twitter:description" content="What changed, why it matters, and what to try first." />
<meta name="twitter:image" content="https://example.com/og/a-clearer-way-to-ship.png" />
<meta name="twitter:image:alt" content="Dark card with the headline: A clearer way to ship" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:creator" content="@authorhandle" />The twitter:site and twitter:creator tags are optional but useful: they attribute the card to an account and can add the handle to the preview. The twitter:image:alt tag is not optional if you care about accessibility; it is what screen readers and some fallback states use.
1200 x 628 or 1200 x 630?
Both are the same shape within rounding. X documents the large card around 1.91:1, and 1200 x 628 is the commonly cited size. A 1200 x 630 Open Graph image is 1.904:1, which is close enough that the crop difference is a couple of pixels. Do not maintain a separate file just to match the two-pixel difference.
What does matter is the crop in the timeline. Some X placements show a container closer to 2:1, so a 1.91:1 card loses a small amount from the top and bottom. Keep the headline and logo inside the middle 80 percent and the difference is invisible.
Safe area for X
- Keep the headline and logo at least 64 px from every edge of a 1200 x 630 canvas.
- Keep the meaning inside the middle 80 percent, because the timeline crop is close to 2:1.
- Use a headline around 72-96 px. X renders the card at different widths on desktop and mobile.
- Avoid text in the bottom 10 percent; some layouts place the title and domain below the image and the composition can feel crowded.
- Check the card in the composer on a phone, not only on desktop.
File format and weight
X accepts JPG, PNG, WebP, and GIF. The documented limit is 5 MB, but a 5 MB card is a bad idea: it loads slowly and can fail in a busy timeline. Target under 1 MB, and under 300 KB when the design allows it. JPG at 85 percent or WebP at 80 percent is usually indistinguishable from PNG for a photographic card.
Transparency is not your friend. X may composite a transparent PNG onto a dark or light surface, and the result depends on the client. Export a solid background. If the card uses a gradient, make sure the type sits on a stable value.
Why the X card is blank
| Symptom | Likely cause | Fix |
|---|---|---|
| No image at all | twitter:image missing and og:image not picked up | Add both tags with an absolute HTTPS URL |
| Small thumbnail | summary card or a small image | Use summary_large_image and a 1200 px wide file |
| Old image | X cached the card | Change the image filename or update twitter:image |
| Cropped headline | Text near the edge | Keep content inside the middle 80 percent |
| Wrong title | Duplicate tags or a stale page cache | Check the source for one title tag and clear the cache |
| No preview in a DM | X may not unfurl privately shared links the same way | Check the public post composer; some DM clients do not render cards |
How to test an X card
- 01Confirm
twitter:cardandtwitter:imageare in the server-rendered HTML. - 02Open the image URL in a private window; it must return 200 without a login.
- 03Paste the URL into a new post draft and look at the card.
- 04Try it on mobile and desktop; the timeline container is different.
- 05If the card is stale, change the image filename and try again.
X's own Card Validator has been unreliable for years. The composer preview is the practical test because it uses the same pipeline as a published post. For a second opinion, the Facebook Sharing Debugger will at least confirm that the Open Graph fallback is correct.
Twitter card vs. Open Graph: what wins?
When both sets of tags are present, X uses the twitter:* values for the fields it supports. Open Graph fills the gaps. That is why a page with only og:image can still show a card on X, and why a page with a mismatched twitter:image can show the wrong image on X while Facebook looks correct.
| Field | X-specific tag | Open Graph fallback |
|---|---|---|
| Card type | twitter:card | None; X chooses a default |
| Title | twitter:title | og:title |
| Description | twitter:description | og:description |
| Image | twitter:image | og:image |
| Image alt | twitter:image:alt | og:image:alt |
| Attribution | twitter:site / twitter:creator | None |
Frequently asked questions
What size is a Twitter card image?
Use 1200 x 628 for a summary_large_image card and around 400 x 400 for a summary card. A 1200 x 630 Open Graph image also works for the large card because the ratio is effectively the same.
Does X use og:image or twitter:image?
X prefers twitter:image when it is present and falls back to og:image otherwise. It is safest to provide both, pointing at the same file.
What is the maximum file size for an X card image?
X documents a 5 MB limit. Keep the file under 1 MB for fast loading, and under 300 KB where the design allows. Smaller files fail less often in the timeline.
Why is my Twitter card image cropped?
X uses a container close to 2:1 in some placements. A 1.91:1 image loses a few pixels at the top and bottom. Keep the headline and logo inside the middle 80 percent of the canvas.
What is the difference between summary and summary_large_image?
summary shows a compact square image; summary_large_image shows a wide image above the title and description. Use the large card for articles, launches, and any page with a purpose-built 1.91:1 card.
Do I need a separate image for X and Facebook?
Usually not. One 1200 x 630 file works for both. A separate asset is only worth it if you want X-specific copy or a different crop baked into the card.
Why does my card show no image in a DM?
Some X clients do not render link cards in direct messages the same way as public posts. Test in the public composer first. If the card is correct there, the DM behaviour is a client limitation, not a tag problem.
Can I use a GIF for a Twitter card?
X accepts GIFs for some card types, but support is inconsistent and the file is heavier. Use a static 1200 x 628 image for the card and let the destination page carry any animation.
Sources and further reading
Written and maintained by GxAditya
The person who builds ogimg.in. Last updated . 6 min read.
Free, no account
Make the image, then copy the tags
Start from a template or a blank canvas. Export a 1200 x 630 PNG, JPEG, or WebP, and copy the Open Graph tags from the preview panel.