Open Graph Image Size Guide
The complete reference for Open Graph image dimensions, aspect ratios, and file formats across all major social media platforms.
Universal Recommendation: 1200×630px
If you can only use one image size for all platforms, use 1200×630 pixels (1.91:1 aspect ratio). This dimension works optimally across Facebook, LinkedIn, Slack, Discord, and most other platforms that support Open Graph.
💡 Quick Tips
- ✅ Use 1200×630px for maximum compatibility
- ✅ Always use HTTPS URLs for images
- ✅ Keep file size under 5MB (ideally under 1MB)
- ✅ Use JPG or PNG format (WebP for modern platforms)
Platform-Specific Image Sizes
- Recommended: 1200×630px (1.91:1)
- Minimum: 200×200px (below this, images are rejected)
- Maximum: 8MB file size
- Aspect ratio: 1.91:1 for large previews
- Formats: JPG, PNG, WebP, GIF
Note: Images smaller than 600×315px display as a small thumbnail. Square images (1:1) also display smaller.
Twitter (X)
Twitter uses its own twitter:card meta tags but falls back to OG tags:
- Summary Card with Large Image: 1200×628px (1.91:1)
- Summary Card: 120×120px minimum (1:1, up to 4096×4096px)
- Maximum: 5MB file size
- Formats: JPG, PNG, WebP, GIF
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://example.com/twitter.jpg" />- Recommended: 1200×627px (1.91:1)
- Minimum: 200×200px
- Maximum: 5MB file size
- Formats: JPG, PNG
LinkedIn's algorithm favors high-quality, professional imagery. Avoid overly promotional or low-contrast images.
Slack
- Recommended: 1200×630px (1.91:1)
- Minimum: 200×200px
- Display: Max width 400px in unfurls
- Formats: JPG, PNG, GIF
Discord
- Recommended: 1200×630px (1.91:1)
- Minimum: 400×300px for full embeds
- Maximum: 10MB file size
- Formats: JPG, PNG, WebP, GIF
- Recommended: 1200×630px (1.91:1)
- Maximum: 300KB file size (strictly enforced)
- Formats: JPG, PNG
WhatsApp has the strictest file size limit. Compress images aggressively while maintaining quality.
Telegram
- Recommended: 1200×630px (1.91:1)
- Formats: JPG, PNG, WebP
iMessage
- Recommended: 1200×630px (1.91:1)
- Minimum: 400×300px
- Formats: JPG, PNG
Quick Reference Table
| Platform | Optimal Size | Min Size | Max File Size |
|---|---|---|---|
| 1200×630px | 200×200px | 8MB | |
| Twitter/X | 1200×628px | 120×120px | 5MB |
| 1200×627px | 200×200px | 5MB | |
| Slack | 1200×630px | 200×200px | — |
| Discord | 1200×630px | 400×300px | 10MB |
| 1200×630px | — | 300KB |
Understanding Aspect Ratios
Different aspect ratios serve different purposes:
1.91:1 (1200×630) - Wide Format
- ✅ Best for landscape/hero images
- ✅ Maximum visual impact on most platforms
- ✅ Works for article headers and banners
- ❌ May crop content on Twitter's summary card
1:1 (1200×1200) - Square Format
- ✅ Works well on Instagram and Pinterest
- ✅ Good for profile pictures and logos
- ❌ Shows as smaller thumbnail on Facebook
- ❌ Less engaging on LinkedIn
2:1 (1200×600) - Extra Wide
- ✅ Cinematic look
- ❌ May get cropped on some platforms
Image Optimization Best Practices
File Format Selection
- JPG: Best for photos and complex images (use 80-85% quality)
- PNG: Best for graphics with text, logos, or transparency needs
- WebP: Modern format with better compression (30% smaller than JPG)
- GIF: Only for animations (use sparingly, large file sizes)
Compression Tips
- Use tools like TinyPNG, ImageOptim, or Squoosh.app
- Target 80-85% quality for JPGs (visually lossless)
- Remove metadata/EXIF data to save bytes
- Use progressive JPGs for faster perceived loading
- Test with different formats to find the smallest file size
Design Considerations
- Safe zone: Keep important elements in the center 80% (platforms crop differently)
- Text size: Minimum 40px font size for mobile readability
- Contrast: Use high contrast for readability on all devices
- Avoid edges: Don't place critical content within 50px of edges
- Brand consistency: Use consistent colors and style across all OG images
⚠️ Common Mistakes to Avoid
- ❌ Using images smaller than 200×200px
- ❌ Exceeding platform file size limits (especially WhatsApp's 300KB)
- ❌ Using HTTP instead of HTTPS
- ❌ Relative image URLs like
/images/og.jpg - ❌ Putting critical text near image edges
- ❌ Using low-contrast colors that don't work in dark mode
Dynamic OG Images
For dynamic content (blog posts, product pages), consider generating OG images programmatically:
Tools for Dynamic Images
- Cloudinary: On-the-fly image transformations with text overlays
- ImageKit: URL-based image manipulation
- Vercel OG Image: Serverless function for generating images with React/JSX
- Puppeteer/Playwright: Headless browser screenshots of HTML templates
- Canvas/Sharp (Node.js): Server-side image generation libraries
Dynamic Image Benefits
- ✅ Automatic updates when content changes
- ✅ Consistent branding across all pages
- ✅ Personalization (author names, dates, categories)
- ✅ No manual design work for each post
Testing Your Images
Always test your OG images across multiple platforms:
- Use our tool: OG Preview Tool to see all platforms at once
- Facebook Debugger: developers.facebook.com/tools/debug
- Twitter Card Validator: cards-dev.twitter.com/validator
- LinkedIn Inspector: linkedin.com/post-inspector
- Real shares: Test with actual shares on each platform
Performance Considerations
- CDN hosting: Use a CDN to ensure fast global delivery
- Cache headers: Set long cache times (1 year+) for static images
- Lazy loading: OG images don't need lazy loading (they're in
<head>) - Responsive images: Not needed for OG tags (platforms fetch one size)
- Preconnect: Add DNS preconnect to your image CDN
Additional Resources
Preview Your OG Images
See how your images look across Facebook, Twitter, LinkedIn, and 5 other platforms instantly.
Try the Free Preview Tool