Recommended Image Sizes for Websites
A quick reference for the most common image dimensions used on the web. All sizes account for retina (2x) displays unless noted.
Website Layout Images
| Image Type | Recommended Size | Aspect Ratio | Notes |
|---|---|---|---|
| Full-width hero | 1920×1080 | 16:9 | Use srcset for smaller viewports |
| Blog post header | 1200×630 | ~1.9:1 | Doubles as OG image |
| Content image | 800×600 | 4:3 | Standard within article body |
| Thumbnail | 400×400 | 1:1 | Product cards, grid items |
| Avatar/profile | 200×200 | 1:1 | Accounts for 2x retina |
| Logo | 400×100 | Varies | Use SVG when possible |
| Background image | 1920×1080 | 16:9 | Compress aggressively (quality 60-70) |
Social Media / Open Graph
| Platform | Recommended Size | Min Size |
|---|---|---|
| Open Graph (Facebook, LinkedIn) | 1200×630 | 600×315 |
| Twitter/X (summary_large_image) | 1200×628 | 600×314 |
| Twitter/X (summary) | 240×240 | 144×144 |
| Pinterest pin | 1000×1500 | 600×900 |
Favicons & App Icons
| Icon Type | Size | Format |
|---|---|---|
| Favicon (browser tab) | 32×32 | PNG or ICO |
| Favicon (SVG) | Any (vector) | SVG |
| Apple touch icon | 180×180 | PNG |
| Android Chrome | 192×192, 512×512 | PNG |
| Microsoft tile | 150×150 | PNG |
Retina / HiDPI Considerations
Most modern devices have a device pixel ratio (DPR) of 2x or higher. For crisp images:
- 2x DPR (most common): Serve images at 2x the CSS display size
- 3x DPR (flagship phones): Consider 3x for critical hero images only — diminishing returns above 2x
- 1x DPR: Standard displays — natural size = rendered size is optimal
Check how your images compare to these recommendations.
Scan Your Website