OG Image Optimization: Size, Format, Compression & Performance

Why OG image optimization matters

Social platforms and messaging apps fetch your OG image every time someone shares a link. If your image is too large, too slow, or in the wrong format, platforms may time out and show a broken preview — or worse, cache the broken state for hours.

An optimized OG image loads fast, looks sharp on all devices, and stays within platform limits. Here's everything you need to know.

Optimal dimensions

The universal standard for OG images is 1200 × 630 pixels (1.91:1 aspect ratio).

• Twitter: 1200×628 (summary_large_image) or 120×120 (summary)
• Facebook: 1200×630 minimum; smaller images get a tiny left-aligned thumbnail
• LinkedIn: 1200×627; images <200px wide are ignored
• Slack: 1200×630; respects any aspect ratio but 1.91:1 looks best
• Discord: 1200×630; renders at various sizes in embeds
• WhatsApp: 300×200 minimum; larger images get cropped to center

Rule of thumb: Always use 1200×630. It works on every platform without cropping issues.

File format comparison

PNG

• ✅ Lossless quality — text and logos stay crisp
• ✅ Supports transparency
• ✅ Universal support across all platforms
• ⚠️ Larger file sizes (typically 200KB-1MB for OG images)

JPEG

• ✅ Smaller file sizes (50-200KB typical)
• ✅ Universal support
• ⚠️ Lossy compression — text can look blurry
• ⚠️ No transparency support

WebP

• ✅ Best compression ratio
• ✅ Supports both lossy and lossless
• ⚠️ NOT supported by all social crawlers — Twitter and LinkedIn may not display WebP OG images
• ❌ Do NOT use WebP for OG images

Recommendation: Use PNG for OG images with text overlays (blogs, docs, marketing pages) and JPEG for photo-heavy OG images (product shots, team photos). Never use WebP — social crawlers have inconsistent support.

File size limits

• Twitter: Max 5MB (recommended <1MB)
• Facebook: Max 8MB (recommended <300KB)
• LinkedIn: Max 5MB
• Slack: No hard limit, but images over 2MB may not preview

Target: Keep your OG images under 300KB. This ensures fast loading on all platforms and avoids timeout issues.

Compression techniques

# Using sharp (Node.js) for OG image optimization
import sharp from 'sharp';

// PNG optimization
await sharp('og-image.png')
  .resize(1200, 630, { fit: 'cover' })
  .png({ quality: 85, compressionLevel: 9 })
  .toFile('og-image-optimized.png');

// JPEG optimization  
await sharp('og-photo.jpg')
  .resize(1200, 630, { fit: 'cover' })
  .jpeg({ quality: 80, progressive: true })
  .toFile('og-photo-optimized.jpg');

# CLI tools
# pngquant — lossy PNG compression (huge savings)
pngquant --quality=65-85 --strip og-image.png

# optipng — lossless PNG optimization
optipng -o5 og-image.png

# jpegoptim — JPEG optimization
jpegoptim --max=80 --strip-all og-photo.jpg

CDN caching for OG images

Serve your OG images with proper cache headers so social crawlers and CDN edge nodes cache them efficiently:

Cache-Control: public, max-age=86400, s-maxage=604800
Content-Type: image/png

• max-age=86400: Browser caches for 1 day
• s-maxage=604800: CDN caches for 1 week

When you update an OG image, use a cache-busting strategy: change the filename or add a version parameter (?v=2).

Performance checklist

• ☐ Image dimensions: 1200×630px
• ☐ File format: PNG (text) or JPEG (photos) — never WebP
• ☐ File size: Under 300KB
• ☐ Served over HTTPS
• ☐ Accessible without authentication
• ☐ CDN-cached with proper headers
• ☐ og:image:width and og:image:height specified
• ☐ Image loads in under 2 seconds
• ☐ No redirect chains on the image URL