The Ultimate Cheat Sheet to Image Aspect Ratios for Social Media & Web Cards
A complete dimension and aspect ratio cheat sheet for Instagram, YouTube thumbnails, X (Twitter) cards, OpenGraph previews, and responsive web banners.
The Ultimate Cheat Sheet to Image Aspect Ratios for Social Media & Web Cards
Whether you are designing digital marketing banners, creating video thumbnails, or configuring OpenGraph social preview images for a web application, choosing the correct aspect ratio and pixel dimensions is crucial.
Publishing images with incorrect proportions leads to unintended cropping, pixelated previews, and awkward borders across social feeds. In this comprehensive cheat sheet, we break down the standard aspect ratios used across modern social networks and web platforms in 2026.
1. Summary Cheat Sheet: Master Dimension Table
| Platform & Media Type | Recommended Aspect Ratio | Optimal Pixel Dimensions | Best Image Format |
| :--- | :--- | :--- | :--- |
| YouTube Video Thumbnail | 16:9 (Widescreen) | 1280 x 720 px | JPG / WebP |
| Instagram Square Feed | 1:1 (Square) | 1080 x 1080 px | JPG / WebP |
| Instagram Portrait Feed | 4:5 (Vertical) | 1080 x 1350 px | JPG / WebP |
| Instagram / TikTok Story | 9:16 (Vertical Widescreen) | 1080 x 1920 px | JPG / WebP |
| X (Twitter) Feed Card | 16:9 (Widescreen) | 1200 x 675 px | JPG / PNG / WebP |
| LinkedIn Shared Image | 1.91:1 (Landscape) | 1200 x 627 px | PNG / JPG |
| OpenGraph Web Preview | 1.91:1 or 16:9 | 1200 x 630 px | PNG / WebP |
| Hero Web Banner | 16:9 or 21:9 | 1920 x 1080 px | WebP |
2. Breaking Down the Top Aspect Ratios
A. The 16:9 Ratio – Universal Widescreen Standard
16:9 is the standard landscape ratio across high-definition televisions, desktop monitors, YouTube videos, and web hero banners.
- Why Use It? It fits standard desktop displays natively without letterboxing (black bars).
- Ideal Dimensions:
1920x1080(Full HD),1280x720(720p),1200x675(Twitter feed card).
B. The 1:1 Ratio – Square Format
1:1 means the image width equals its height. Popularized by Instagram, it remains a dominant format for product thumbnails, user avatars, and eCommerce grids.
- Why Use It? It provides balanced mobile and desktop viewport real estate.
- Ideal Dimensions:
1080x1080(Instagram feed),800x800(eCommerce product view).
C. The 4:5 Ratio – Vertical Social Feed Format
Mobile screens are vertically oriented. The 4:5 ratio allows creators to occupy more vertical screen real estate on mobile feeds than traditional square or landscape images.
- Why Use It? It increases engagement on mobile apps like Instagram by pushing secondary UI elements out of the viewport.
- Ideal Dimensions:
1080x1350.
D. The 9:16 Ratio – Fullscreen Vertical Mobile Format
9:16 is the inverse of 16:9. Designed specifically for smartphone screens, it covers the entire device viewport.
- Why Use It? Standard format for TikTok videos, Instagram Reels, YouTube Shorts, and Snapchat stories.
- Ideal Dimensions:
1080x1920.
3. Configuring OpenGraph (OG) Images for Next.js Websites
When users share your website link on Slack, Twitter, Facebook, or WhatsApp, social bots fetch metadata specified by OpenGraph <meta> tags.
<!-- HTML OpenGraph Meta Tags -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="Your page meta description." />
<meta property="og:image" content="https://yourdomain.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
To ensure your link previews appear sharp and uncropped across mobile and desktop platforms, design your OpenGraph graphics at 1200 x 630 px (1.91:1 ratio).
4. Best Practices to Prevent Unintended Social Cropping
- Keep Focal Content Centered: Social networks automatically crop images depending on device viewports. Keep critical text logos and faces within the central 80% safe zone.
- Export at 2x Resolution: Export images at double the target pixel size (e.g.,
2400x1260for OG cards) to maintain crisp clarity on Retina displays. - Use WebP for Smaller Payloads: Convert bulky PNG or JPEG files into modern WebP format to speed up link preview loading times.
Optimize Social & Banner Assets Instantly
Ready to convert graphics into modern WebP format for fast social card preview loading? Use our 100% private Image Format Converter to transform photos locally, or rasterize vector logos using our SVG to PNG Converter!