Best Image Size for Website SEO (2026 Cheat Sheet)
Standardizing your image sizes is the key to a fast, professional website. Get the exact dimensions for heroes, blogs, and products.
"How big should my image be?"
Uploading oversized images is one of the most common contributors to poor Core Web Vitals and slow LCP.
Ideal for: Web Designers and Content Managers.
TL;DR (Quick Reference)
- Hero Images: 1920px max width
- Blog Images: 1200px (Featured) / 800px (Body)
- Product Images: 1000–1500px square
It is the most common question we get. And for good reason—uploading a 5000px wide photo from your iPhone to your blog is a disaster for speed.
This guide gives you the standard dimensions you should use for every part of your website in 2026.
The Golden Rule
Never serve an image larger than the container it lives in.
Google recommends properly sizing images to avoid serving unnecessary bytes and improve page speed (see Google Image SEO documentation).
If your blog content area is only 800px wide, uploading a 2000px image is pure waste. The browser has to download the huge file and then shrink it down, wasting bandwidth and battery.
Standard Dimensions Cheat Sheet (2026)
These sizes balance visual quality, load speed, and Core Web Vitals across modern devices.
Use these dimensions as your baseline.
| Image Type | Recommended Width | Aspect Ratio | Max File Size |
|---|---|---|---|
| Hero / Banner | 1920px | 16:9 | < 200 KB |
| Blog Featured | 1200px | 16:9 or 3:2 | < 100 KB |
| Blog Content | 800 - 1000px | Auto | < 80 KB |
| Product (Zoom) | 1000 - 1500px | 1:1 (Square) | < 150 KB |
| Product (Thumb) | 500px | 1:1 (Square) | < 30 KB |
| Social Share | 1200px | 1.91:1 | < 100 KB |
| Logo | 300px (SVG best) | Variable | < 10 KB |
| Favicon | 32px / 192px | 1:1 | < 1 KB |
1. Hero Images (Full Width)
Target: 1920px width
This is usually the "LCP" (Largest Contentful Paint) element. It must load fast.
- Desktop: 1920px is standard for "Full HD" monitors.
- 4K?: Do NOT serve 4K (3840px) images unless you are a photography portfolio. It destroys mobile performance.
2. Blog Post Images
Target: 1200px (Featured) / 800px (Body)
Most CMS themes (WordPress, Ghost, Webflow) cap the reading width at around 700-800px for readability.
- Featured Image: Go with 1200px so it looks sharp on social media cards when shared.
- Body Images: Resize them to your content width (e.g., 800px).
3. E-commerce Product Images
Target: 1000px - 1500px (Square)
Details matter. Users want to zoom in.
- Zoom: 1500px allows for a high-quality 2x zoom on most desktops.
- Thumbnails: Don't use the 1500px original for the collection view. Generate a 500px thumbnail.
What About Retina / High-DPI Screens?
Modern phones and MacBooks have "Retina" screens (2x or 3x pixel density). A 400px wide image might look blurry on a 400px wide iPhone screen because that screen actually has 1200 physical pixels.
The Fix: Use srcset.
Don't just make the image 3x bigger for everyone. Serve a normal size to normal screens, and a 2x size to Retina screens.
<img src="photo-1x.jpg" srcset="photo-1x.jpg 1x, photo-2x.jpg 2x" alt="Sharp Image">
Common Mistakes
- Using Raw Camera Photos: A photo from a modern camera is 6000px wide and 20MB. Never upload this directly. Resize it first.
- Inconsistent Aspect Ratios: If one blog post uses 16:9 and another uses 4:3, your "Latest Posts" grid will look broken. Stick to one ratio.
- Ignoring Mobile: Mobile screens are narrow (approx 400px). Serving a 1920px desktop hero to a phone is overkill. Use responsive loading.
Tools to Resize Images
- Image Resizer: Free tool to change dimensions without software.
- Image Cropper: Fix aspect ratios instantly.
- Aspect Ratio Calculator: Calculate the exact height for a specific width.
Final SEO Checklist (2026)
Size matters. By resizing your images to the standard dimensions of 2026, you ensure your site looks professional and loads instantly.
Resize Images Using These SEO Sizes →
For a complete optimization workflow, see our Image Optimization Guide for SEO.