Why Image Dimensions Matter for Websites
Uploading images at the correct dimensions is one of the most impactful performance optimizations you can make. When you upload a 3000×2000 photo that's displayed at 800×500, the browser downloads all 6 megapixels then scales it down in real time — wasting bandwidth and adding render time. Correct dimensions eliminate this waste entirely.
Standard Web Image Dimensions
| Element | Recommended Dimensions | Notes |
|---|---|---|
| Hero / Banner image | 1920 × 600–900 px | Full-width; many themes crop to this ratio |
| Blog post featured image | 1200 × 630 px | Also correct size for Open Graph/social sharing |
| Blog post in-content image | 800 × auto px | Max width matching your content column |
| Product image (e-commerce) | 1000 × 1000 px | Square; allows zoom without distortion |
| Thumbnail | 300 × 200 px | Varies by theme; check theme documentation |
| Sidebar widget image | 300 × 250 px | Standard sidebar widget area |
| Team member / avatar | 400 × 400 px | Square for circular display |
| Logo | 250 × 80 px | SVG preferred; PNG at 2× for retina |
| Favicon | 32 × 32 px | Also create 16×16, 48×48, 180×180 variants |
WordPress Image Dimensions
WordPress generates several image sizes from every upload. The defaults are:
- Thumbnail: 150 × 150 px (cropped to square)
- Medium: max 300 × 300 px (maintains aspect ratio)
- Medium Large: max 768 × unlimited px
- Large: max 1024 × 1024 px
- Full: original size
Upload at the maximum size you'll ever need (usually the full-width version) and let WordPress generate smaller variants. For blog post featured images, upload at 1200 × 630 px or larger.
Shopify Image Dimensions
- Product images: 2048 × 2048 px maximum, square format preferred
- Collection images: 1200 × 400–800 px
- Blog featured images: 1200 × 630 px
- Banner/slideshow images: 1600 × 500–800 px
Retina / HiDPI Screens
Retina displays (MacBooks, iPhones, recent iPads) have 2× pixel density. An image displayed at 400 px wide on a retina screen needs to be 800 px wide to appear sharp. For critical images (hero, product), upload at 2× the display size. For blog thumbnails and less critical elements, 1× is usually acceptable.
How to Resize to Exact Dimensions
Use our free Image Resizer — enter exact pixel dimensions, lock or unlock aspect ratio, and download. For cropping to a specific ratio without distortion, use the Image Crop Tool with the aspect ratio preset matching your target dimensions.