Best Image Size & Format for Websites in 2026
Unoptimized images are the number one cause of slow websites. This guide gives you concrete recommendations for image dimensions, file sizes, and formats based on how images are actually displayed on modern websites.
The Golden Rule: Serve Images at Display Size
Never upload a 4000px-wide image if it will only display at 800px wide. The browser downloads the full image but displays it at a fraction of the size — all that extra data is wasted bandwidth.
Always resize your images to the maximum size they'll be displayed before uploading.
Recommended Dimensions by Use Case
| Image Type | Max Width | Target File Size |
|---|---|---|
| Full-width hero/banner | 1920px | Under 200 KB |
| Blog post featured image | 1200px | Under 100 KB |
| Blog post inline image | 800px | Under 60 KB |
| Product photo (e-commerce) | 1000px | Under 80 KB |
| Thumbnail / card image | 400px | Under 25 KB |
| Logo (raster) | 200px | Under 10 KB |
| Background texture | 1000px (tile) | Under 30 KB |
Best Format Recommendations
- Photos and product images: WebP (first choice) or JPG at 80% quality
- Logos and icons: SVG (vector) — scales perfectly at any size, tiny file sizes
- Screenshots and UI images: PNG or WebP lossless
- Illustrations with flat colors: SVG or WebP
Core Web Vitals Targets
Google scores pages on Core Web Vitals. For images, the relevant metric is Largest Contentful Paint (LCP) — how fast the main visible image loads:
- Good: LCP under 2.5 seconds
- Needs Improvement: 2.5 – 4 seconds
- Poor: Over 4 seconds
If your hero image is over 200 KB, it's likely contributing to a poor LCP score on mobile connections.
Step-by-Step Image Optimization Workflow
- Determine display size — Check the actual CSS/HTML maximum width your image will render at.
- Resize to that width — Use our Image Resizer. Include 2x versions for retina displays (if needed).
- Convert to WebP — Use JPG to WebP or PNG to WebP.
- Compress — Use our Image Compressor at 75–80% quality.
- Set width and height attributes — Prevents Cumulative Layout Shift (CLS), another Core Web Vitals metric.
- Add lazy loading —
loading="lazy"for below-the-fold images.
Retina / HiDPI Screens
Retina screens (most modern phones and MacBooks) display at 2x or 3x pixel density. A 400px-wide slot on your page requires an 800px image to look sharp on retina. Use the HTML srcset attribute to serve different sizes based on screen density:
<img
src="image-400.webp"
srcset="image-400.webp 1x, image-800.webp 2x"
width="400" height="300"
alt="Description"
>Next.js Users
If you're using Next.js, the <Image> component handles all of this automatically — it resizes, serves WebP, and adds lazy loading out of the box. Just provide the original high-resolution image and let Next.js optimize delivery.