Using the correct image dimensions is one of the easiest ways to improve website performance. Oversized images waste bandwidth and slow loading; undersized images look pixelated. This guide gives you the optimal dimensions for every web use case.

📱 Standard Image Dimensions Chart

Use Case	Dimensions (px)	Aspect Ratio	Max File Size
Hero Banner	1920 × 1080	16:9	200 KB
Blog Featured	1200 × 630	1.91:1	100 KB
Content Image	800 × 600	4:3	80 KB
Thumbnail	300 × 200	3:2	30 KB
Avatar/Profile	400 × 400	1:1	20 KB
Icon	64 × 64	1:1	5 KB

🎯 Hero & Homepage Images

Desktop Hero Banners

Width: 1920px (full-width) or 1200px (contained)
Height: 600-800px for standard, 1080px for video-style
Target size: Under 200KB

Mobile Hero Banners

Width: 768px (full-width on mobile)
Height: 400-500px (shorter due to screen shape)
Tip: Use srcset to serve mobile hero to phones

💡 Key Insight:

Don't use a 4000px image and let CSS scale it down. Resize to actual display dimensions first - this alone can reduce file size by 75%.

📝 Content & Blog Images

Blog Featured Images

Dimensions: 1200 × 630 pixels (for social sharing)
Alternative: 1200 × 800 for blog headers
Max file size: 100 KB

In-Content Images

Width: 800px max for readable content
Height: Proportional (auto)
For Retina: 1600px display at 800px, twice the pixels
Max file size: 80 KB

📦 E-commerce Image Sizes

Image Type	Dimensions	Notes
Product Main	1500-2000 × 1500-2000	For zoom capability
Product Thumbnail	200 × 200	Square, in grid
Category Banner	1920 × 400	Wide, horizontal

✅ Quick Checklist

☐Resize to display size - Match actual dimensions shown
☐Max 1920px - No web image needs to be wider
☐Thumbnails under 400px - Keep small
☐Use srcset - Serve different sizes to different devices

Image Dimensions for Web: Complete Guide