Placeholder Image Sizes for Web Design — Cheat Sheet
- Hero images: 1920x1080 (desktop), 768x432 (mobile).
- Open Graph / social share cards: 1200x630.
- Blog post featured images: 1200x800 or 800x450.
- Square thumbnails: 600x600 or 400x400. Avatars: 200x200.
Table of Contents
Every time you start a new web project, you end up looking up the same image dimensions. What size should the hero be? What are the OG image requirements? How big does a thumbnail need to be?
This cheat sheet collects every standard placeholder image size for web design in one place — organized by use case so you can copy the dimensions you need and generate a placeholder in seconds.
Hero and Banner Images
| Use case | Dimensions | Aspect ratio | Notes |
|---|---|---|---|
| Full-width desktop hero | 1920x1080 | 16:9 | Standard HD. Many sites crop to 1920x600 for shorter heroes. |
| Standard hero (most sites) | 1280x720 | 16:9 | Safe minimum for crisp display on most monitors. |
| Mobile hero | 768x432 | 16:9 | Served to mobile devices for page speed. |
| Blog hero / featured image | 1200x800 | 3:2 | Standard for WordPress and most CMS platforms. |
| Wide banner / leaderboard | 1920x400 | 24:5 | Short full-width banners, section backgrounds. |
Social Media and Open Graph
| Platform / use case | Dimensions | Notes |
|---|---|---|
| Open Graph (OG) image | 1200x630 | Used by Facebook, LinkedIn, Slack previews. Required for og:image meta tag. |
| Twitter/X card (summary large) | 1200x628 | Essentially the same as OG. Twitter crops slightly differently. |
| Twitter/X card (summary small) | 800x418 | Minimum for large card display. |
| LinkedIn post image | 1200x628 | Same as OG. Crop-safe zone is center 800x418. |
| Pinterest pin | 1000x1500 | 2:3 portrait ratio performs best on Pinterest. |
Thumbnails, Cards, and Grid Images
| Use case | Dimensions | Notes |
|---|---|---|
| Product thumbnail (ecommerce) | 600x600 | Square is standard for Shopify, WooCommerce, Etsy. |
| Product image (full) | 1200x1200 | Shopify recommends 1000x1000 minimum; 1200x1200 for zoom. |
| Blog card thumbnail | 400x300 | 4:3 ratio. Standard for card grid layouts. |
| YouTube thumbnail | 1280x720 | 16:9. Minimum 640x360; 1280x720 for HD display. |
| App screenshot | 1242x2688 | iPhone 14 Pro Max resolution. App Store requires this size. |
Avatars, Icons, and UI Elements
| Use case | Dimensions | Notes |
|---|---|---|
| User avatar (web) | 200x200 | Minimum for retina display at 100x100 display size. |
| User avatar (small) | 64x64 | Common for comment sections and nav bars. |
| Favicon | 32x32 | Standard browser tab favicon. Also generate 16x16 and 48x48. |
| Apple touch icon | 180x180 | iOS home screen shortcut icon. |
| Email avatar / sender logo | 150x150 | Displayed in Gmail and Outlook email clients. |
Standard Ad Unit Sizes
| Ad unit | Dimensions | Notes |
|---|---|---|
| Leaderboard | 728x90 | Most common desktop banner. Top of page. |
| Medium rectangle | 300x250 | Highest fill rate in Google Ad Manager. Sidebar standard. |
| Wide skyscraper | 160x600 | Sidebar tall unit. |
| Billboard | 970x250 | Large desktop header unit. |
| Mobile banner | 320x50 | Standard mobile ad. Also 320x100 for large mobile banner. |
Generate Any Placeholder Size Instantly
Pick any width and height from the cheat sheet above. Custom color, custom label, download as PNG free.
Open Free Placeholder Image GeneratorFrequently Asked Questions
What is the most common placeholder image size?
600x400 is the most widely used generic placeholder size in tutorials and boilerplates. It fits most card layouts, is easy to remember, and has a natural 3:2 aspect ratio. For social sharing, 1200x630 is the most important specific size to know.
Should I use the same image size for desktop and mobile?
No. Use responsive images with srcset or the picture element to serve different sizes to different devices. A 1920x1080 hero image sent to a mobile device wastes bandwidth. A 768x432 version served to mobile loads significantly faster.
What aspect ratio should I use for blog images?
16:9 (1200x675) or 3:2 (1200x800) are the most common for blog featured images. Both work well in card layouts. 3:2 is slightly taller and tends to look better in sidebar widgets; 16:9 works better for YouTube-style featured images.
How do I generate a placeholder at a custom size?
Enter the exact width and height you need in the WildandFreeTools placeholder image generator. Type in the dimensions, choose a background color, add optional label text, and download the PNG. Useful for generating test images that match your specific layout requirements.
