Twitter/X Card Dimensions 2026: The Complete Image Size Guide

Twitter card dimensions haven't stayed still. X (formerly Twitter) has tweaked image handling, card rendering, and cropping behavior multiple times. If you're using dimensions from a 2023 guide, your images might be getting cropped in ways you don't expect.

This is the updated 2026 reference. Bookmark it.

Summary Large Image Card

This is the card type you want for most links. It renders a large image above the title and description, taking up significant real estate in the feed.

Dimensions: 1200 x 628 pixels Aspect ratio: 1.91:1 Minimum size: 300 x 157 pixels (but don't go this small — it looks terrible) Maximum file size: 5MB Supported formats: JPG, PNG, GIF, WEBP

This is the card you see when someone shares a blog post, landing page, or product page with a well-configured og:image. It's the highest-engagement card format because the image dominates the preview.

To trigger this card type, include these meta tags in your page's head:

• twitter:card set to "summary_large_image"
• twitter:image pointing to your image URL
• twitter:title with your page title
• twitter:description with a short summary

If you don't set twitter:card, X defaults to the smaller summary card — which gets significantly less engagement.

Summary Card (Small Image)

The compact card format. Shows a small square thumbnail next to the title and description.

Image dimensions: 144 x 144 pixels minimum, 4096 x 4096 pixels maximum Displayed size: Roughly 120 x 120 pixels in the feed Aspect ratio: 1:1 (square) Maximum file size: 5MB

This format works for content where the text matters more than the image — API documentation, text-heavy articles, or pages where you don't have a compelling visual. But for most use cases, the large image card is the better choice.

In-Stream Photos

When you attach an image directly to a tweet (not a link preview), different rules apply.

Recommended dimensions: 1600 x 900 pixels Aspect ratio: 16:9 Minimum display: 600 x 335 pixels Maximum file size: 5MB per image (15MB for GIFs)

Single images display at 16:9 in the feed. Two images split into two equal rectangles. Three images show one large rectangle and two smaller ones. Four images display in a 2x2 grid.

Pro tip: If you're posting a product screenshot as an in-stream image (not a link), design it at 1600 x 900 to avoid any cropping surprises.

Profile Banner

Dimensions: 1500 x 500 pixels Aspect ratio: 3:1 Maximum file size: 5MB

The banner gets cropped differently on mobile vs desktop. Keep critical elements (text, logos) in the center 60% of the image. The top and bottom edges get clipped on smaller screens.

DM Shared Images

Images shared in direct messages render differently than in the public feed.

Recommended: 1200 x 628 for link previews, 1600 x 900 for direct image shares

DM previews are smaller and more compressed. High contrast and large text are even more important here than in the public timeline.

The Meta Tags You Need

Getting the dimensions right only matters if your meta tags are correct. Here's the essential set:

• og:image — The image URL (used as fallback by X)
• twitter:image — X-specific image (takes priority over og:image)
• twitter:card — Either "summary" or "summary_large_image"
• twitter:title — Your page title
• twitter:description — Short description (max 200 characters renders well)
• twitter:site — Your account handle (optional but recommended)

X checks for twitter-specific tags first, then falls back to Open Graph tags. If you only set og:image without twitter:card, you'll get the smaller summary card by default. Always explicitly set twitter:card to "summary_large_image" for the best results.

If you need to quickly create card images at the right dimensions, a Twitter card generator handles the sizing automatically so you don't have to think about it.

Dark Mode Considerations

This is where most people slip up. Over 80% of X users browse in dark mode. Your card image sits against a near-black background.

What breaks in dark mode:

• Light gray backgrounds blend into the card border and look washed out
• White text on light backgrounds becomes invisible
• Subtle pastel colors lose all contrast
• Thin fonts become unreadable

What works in dark mode:

• Bold, saturated background colors (deep blue, rich purple, bright gradients)
• White or light text on dark or vivid backgrounds
• High contrast between all elements
• Clear separation between your image and the card border

Test every OG image against a dark background before publishing. If it doesn't pop on #000000, rethink the design.

Common Mistakes That Kill Engagement

Wrong Aspect Ratio

If your image doesn't match the expected aspect ratio, X crops it — from the center. That means your carefully positioned text or logo might get cut off entirely. Always design at exactly 1200 x 628 for summary_large_image cards.

Text Too Small

Your card image renders at roughly 500px wide on mobile feeds. Text that's readable at 1200px becomes illegible at 500px. Use a minimum of 48px font size at the full 1200px resolution. Fewer words, bigger type.

Low Contrast

A subtle, "elegant" design with muted tones and thin fonts might look great in Figma. On a busy Twitter timeline, it vanishes. Social feeds reward bold, high-contrast visuals.

Missing twitter:card Tag

Without this tag, X defaults to the small summary card regardless of how good your image is. One missing meta tag halves your visual real estate. Always check.

Broken Image URLs

If your og:image URL returns a 404, X caches that failure. Even after you fix it, the cached version persists. Use absolute URLs (not relative paths) and verify they're accessible before sharing.

How to Test Your Cards

Before sharing any link, validate it:

• X Card Validator — Paste your URL and see exactly how X will render your card. Also forces X to re-fetch cached images.
• Check mobile rendering — Open the validator on your phone too. What looks fine on desktop might crop poorly on mobile.
• Test in dark mode — Switch to dark mode and check the preview. This is how most people will see it.

Creating Twitter Cards Fast

You don't need Figma or Photoshop to create properly sized Twitter card images. With Screenhance, the process takes under two minutes:

• Upload your screenshot or visual
• Choose a background and device frame
• The tool handles the correct export dimensions
• Download and set as your og:image

For teams publishing frequently, having a consistent template saves hours per week. Design it once, swap in new screenshots for each page.

Quick Reference Cheat Sheet

• Summary large image card: 1200 x 628px, 1.91:1 ratio, 5MB max
• Summary card (small): 144x144 min, 4096x4096 max, 1:1 ratio
• In-stream photo: 1600 x 900px, 16:9 ratio
• Profile banner: 1500 x 500px, 3:1 ratio
• DM images: 1200 x 628px for links, 1600 x 900px for photos
• All formats: JPG, PNG, GIF, WEBP supported

Twitter/X Card Types in 2026: Summary, Summary Large Image, App, Player — When to Use Each

X supports four card types in 2026, and most teams default to summary_large_image without knowing the alternatives exist. Each card type has a specific job, and picking the wrong one quietly costs engagement.

summary_large_image. The default for almost everything. Blog posts, landing pages, product pages, marketing content. The image dominates the card and stops the scroll. If you don't know which to pick, pick this. The trade-off is that it consumes more vertical space in the timeline, which means fewer cards appear per scroll — but each card you do appear in is unmissable. summary (small card). The compact version with a thumbnail next to the text. Right for content where the headline carries the weight: API documentation, technical reference pages, FAQ entries, anything where readers are searching for a specific text answer and the visual is secondary. The card occupies less timeline real estate, which can help in threaded contexts where you don't want a single link dominating the thread. app. A dedicated card for App Store and Play Store links. Shows install button, ratings, and store metadata directly inside the card. If you're tweeting a link to your iOS or Android app, this card converts dramatically better than summary_large_image because users can install without leaving the timeline. Set up via twitter:app:id:iphone, twitter:app:id:googleplay, and the country-specific variants. Most teams forget this card exists and lose the inline install path entirely. player. For video and audio content that should play inline without leaving X. Required if you're embedding a video from a platform other than X's native upload. Configure twitter:player with an iframe URL and the player dimensions, plus twitter:player:stream for the raw media file. Slightly fussier to set up, but for video-first products this card type is the difference between "click through to YouTube" and "watch in feed and convert."

The rule of thumb: pick the card type that matches what the recipient should do next. Reading a blog post — summary_large_image. Looking up a doc page — summary. Installing an app — app. Watching content — player. Default to large image only if none of the other three describe your link.

Common Card Meta-Tag Mistakes That Strip Your Previews Silently

The single most frustrating debugging experience: you share your link, no card preview appears, you check the meta tags, and they look fine. The card was stripped silently by X's validator, no error message, no retry mechanism. Here are the failure modes that cause it.

Mixing twitter: and og: tags inconsistently. X falls back to Open Graph when twitter-prefixed tags are missing, but it doesn't merge them intelligently. If your twitter:title is set but twitter:image is missing, X looks for og:image — but only if twitter:image is entirely absent. An empty twitter:image="" tag breaks the fallback. Either set the twitter: tag with a real value or omit it entirely. Absolute URLs missing. Relative paths (e.g., /og-image.png) don't work — X needs the full URL with protocol (https://example.com/og-image.png). This bites teams who generate meta tags dynamically and forget to prepend the canonical domain. Always test the rendered HTML, not the source template. Images behind authentication or geo-restricted CDNs. X's crawler hits your image URL from a US-based IP without cookies. If your CDN geo-restricts to certain countries, or your image is behind any authentication, the crawler gets a 403 and silently drops the card. Serve OG/Twitter images from a fully public path. Image too large or wrong format. Files over 5MB get rejected. Files in unsupported formats (AVIF, modern WebP variants) sometimes render and sometimes don't depending on X's current behavior. Stick to PNG, JPEG, or standard WebP, under 5MB, and you remove an entire class of debugging. Cached failure state. If X tried to fetch your image once and got an error, it caches that failure for hours or days. Even after you fix the underlying issue, your shared links keep showing no preview. The fix: open the X Card Validator, paste your URL, and click "Preview card." This forces a re-fetch and clears the cached failure. A Twitter card generator won't help with cached failures — you have to manually invalidate via the validator. Robots.txt blocking the crawler. Twitterbot needs to be allowed in your robots.txt. If your robots.txt blocks all bots without explicit allowlist entries for Twitterbot, every card preview fails. Check your robots.txt and add an explicit Twitterbot allow if you're using aggressive bot blocking.

Frequently Asked Questions

How do I use the Twitter Card Validator in 2026?

X renamed the tool but the function is the same: cards.dev or the validator inside the developer portal. Paste your URL, click "Preview card." The tool shows you exactly what X will render and which meta tags it parsed. If the preview is empty or wrong, the validator's "Log" tab tells you which tag failed. Always run the validator after deploying changes to OG tags — relying on "it looked right when I shared it once" is how stale failures stay invisible.

Can I serve different card images per page dynamically?

Yes, and you should. Every blog post, product page, and landing page deserves its own card image, not a shared site-wide default. Generate the image dynamically at build time (Next.js, Astro, and similar frameworks support this natively) or via an OG image API. Static site-wide cards convert worse than per-page cards because the image doesn't match the linked content. Use the Twitter card generator to design per-page templates that pull title, description, and key visual from page metadata.

What image dimensions should I actually use in 2026?

1200x628 for summary_large_image cards. This is the size X officially recommends and the size that renders cleanest across web, iOS, and Android clients. Older guides recommended 1200x630 (the OG image standard) — that still works, but 1200x628 is X's preferred ratio and avoids any cropping. For app cards, follow the App Store / Play Store image guidelines for the actual app icon; the card chrome around it is handled by X.

Should I use og: or twitter: meta tag priority?

Set both for maximum compatibility. X reads twitter: tags first and falls back to og: tags when twitter: tags are missing. LinkedIn, Slack, Discord, and most other platforms read only og: tags. If you set just twitter: tags, your card breaks on every non-X platform. If you set just og: tags, your card works everywhere but loses some X-specific niceties (twitter:site, twitter:creator attribution). The right pattern: set complete og: tags for universal coverage, then add twitter:card and twitter:image for X-specific optimization.

My card preview is missing — how do I debug it?

Run this checklist in order. First, open the Card Validator and paste the URL — read the log output. Second, check the rendered HTML (View Source) for the actual og:image and twitter:image values; client-side JavaScript-injected tags don't work because Twitterbot doesn't run JS. Third, hit the image URL directly in an incognito browser — if you get a 403, 404, or anything but the image, X is hitting the same wall. Fourth, check your robots.txt for Twitterbot rules. Fifth, verify file size under 5MB and format is PNG/JPEG/WebP. 90% of missing previews are caught by steps one through three.

Related Reading

• OG Image Size Guide: Dimensions for Every Social Platform - Dimensions across all social platforms
• How to Create OG Images That Get Clicks on Twitter and LinkedIn - Platform-specific creation tips
• OG Image Best Practices: The Complete Guide to Social Share Images - Design principles for social cards
• How to Make Your Screenshots Go Viral on Social Media - Maximizing social media engagement