Image Size Guidelines for Social Media & Web
Every platform has ideal image dimensions that ensure your visuals display perfectly without cropping or quality loss. Using the wrong size can result in blurry images, awkward cropping, or slow loading times. This comprehensive reference covers recommended dimensions, aspect ratios, and file formats for all major social media platforms, web development use cases, and email marketing.
When You Need This Table
- Creating social media graphics that won't get cropped
- Designing OG images for website link previews
- Setting up favicons and PWA icons for web apps
- Preparing product images for e-commerce sites
- Building email templates with properly sized headers
Social Media Image Sizes
| Platform / Type | Dimensions (px) | Aspect Ratio | Format |
|---|---|---|---|
| Facebook Post | 1200 × 630 | 1.91:1 | JPG, PNG |
| Facebook Cover | 820 × 312 | 2.63:1 | JPG, PNG |
| Instagram Post (Square) | 1080 × 1080 | 1:1 | JPG, PNG |
| Instagram Post (Portrait) | 1080 × 1350 | 4:5 | JPG, PNG |
| Instagram Story/Reel | 1080 × 1920 | 9:16 | JPG, PNG, MP4 |
| Twitter/X Post | 1200 × 675 | 16:9 | JPG, PNG, GIF |
| Twitter/X Header | 1500 × 500 | 3:1 | JPG, PNG |
| LinkedIn Post | 1200 × 627 | 1.91:1 | JPG, PNG |
| LinkedIn Cover | 1584 × 396 | 4:1 | JPG, PNG |
| YouTube Thumbnail | 1280 × 720 | 16:9 | JPG, PNG |
| Pinterest Pin | 1000 × 1500 | 2:3 | JPG, PNG |
| TikTok Video | 1080 × 1920 | 9:16 | MP4 |
Web Development Image Sizes
| Use Case | Dimensions (px) | Aspect Ratio | Notes |
|---|---|---|---|
| OG Image (Social Share) | 1200 × 630 | 1.91:1 | Facebook, LinkedIn, Twitter |
| Twitter Card (Large) | 1200 × 600 | 2:1 | Summary with large image |
| Favicon | 32 × 32 | 1:1 | Browser tab icon (also 16×16) |
| Apple Touch Icon | 180 × 180 | 1:1 | iOS home screen |
| PWA Icon (Small) | 192 × 192 | 1:1 | Android home screen |
| PWA Icon (Large) | 512 × 512 | 1:1 | Splash screen, install prompt |
| Hero Banner (Desktop) | 1920 × 1080 | 16:9 | Full-width hero section |
| Blog Featured Image | 1200 × 800 | 3:2 | Article header image |
| Product Image | 1000 × 1000 | 1:1 | E-commerce standard |
| Email Header | 600 × 200 | 3:1 | Newsletter banner |
File Format Guidelines
- JPEG: Photos, complex images (lossy compression)
- PNG: Graphics with transparency, screenshots
- WebP: Modern format, 25-35% smaller than JPEG
- SVG: Logos, icons (scales without quality loss)
Optimization Tips
- Compress images before uploading (TinyPNG, Squoosh)
- Use 2x dimensions for Retina displays
- Keep file sizes under 200KB for web performance
- Test images on mobile before publishing
Choosing the Right Aspect Ratio for Cross-Platform Consistency
Aspect ratio selection directly impacts how your images display across devices and platforms. While 16:9 (1.78:1) is ideal for landscape banners and video thumbnails, vertical formats like 9:16 (Instagram Stories) maximize mobile screen real estate. Square ratios (1:1) offer flexibility for resizing, but avoid stretching content when using non-standard ratios. Always verify platform-specific requirements—some social networks will automatically crop images that don't match recommended dimensions. For responsive web design, consider using CSS object-fit with fallback dimensions to maintain visual integrity across browsers.
- Use 16:9 for video thumbnails and desktop banners
- Use 9:16 for Instagram Stories and vertical content
- Use 1:1 for profile pictures and flexible layouts
- Test aspect ratios on target platforms before publishing
File Format & Optimization Best Practices
Image format choice affects both quality and performance. Use JPEG for photographs and complex visuals (quality 80-85 recommended), and PNG for graphics with transparency or text. Compress images using tools like ImageOptim or Squoosh to reduce file size without visible quality loss. For animated content, Twitter/X supports GIFs up to 15MB, while Instagram Stories allow 3GB MP4 videos. Always test loading speeds—Google PageSpeed Insights recommends keeping image file sizes below 100KB for optimal performance. Remember to include descriptive alt text for accessibility, following the 'when to use camelCase' principles in your alternative text formatting.
- Use JPEG for photographs (quality 80-85 recommended)
- Use PNG for graphics with transparency or text
- Use WebP for modern web optimization
- Compress images before uploading
- Test loading speeds with PageSpeed Insights
Accessibility Considerations for Image Dimensions
Proper image sizing supports accessibility by ensuring legibility for users with visual impairments. Maintain at least 100% of the recommended dimensions for text-containing images to prevent pixelation when zoomed. For responsive designs, use CSS media queries to serve larger image variants on high-DPI screens. Always pair image size adjustments with appropriate alt text that follows the 'write effective alt text' guidelines. Screen readers rely on both visual clarity and semantic markup to convey content accurately. Test your implementation using accessibility tools like axe or Lighthouse to verify compliance with WCAG 2.1 standards.
- Maintain 100%+ dimensions for text-containing images
- Use CSS media queries for high-DPI screens
- Pair size adjustments with proper alt text
- Test with accessibility tools like axe or Lighthouse
Why Image Dimensions Matter
Social media platforms automatically crop images that don't match their preferred aspect ratios. A square image on Twitter will have its top and bottom cut off; a landscape image in Instagram Stories will show black bars. Using the correct dimensions ensures your images display exactly as intended.
For web development, image size directly impacts page load speed. A 3000×2000 pixel hero image compressed to 300KB still loads slower than a properly sized 1920×1080 image at 150KB. Always resize images to their display dimensions and compress them for web delivery.
OG images (Open Graph) are particularly important because they appear in link previews on Facebook, LinkedIn, Slack, and other platforms. A missing or poorly sized OG image can make your shared links look unprofessional and reduce click-through rates.