How to Resize Images for Web - The Right Dimensions for Every Use
Serving oversized images is the #1 cause of slow websites. A 4000x3000 photo displayed at 800x600 wastes 96% of its pixels. Here's how to get image dimensions right.
Try it now - free, no signup required.
Resize Images Free →Recommended Image Dimensions
| Use Case | Width (px) | Retina (2x) |
|---|---|---|
| Hero/Banner | 1600 | 3200 |
| Blog content | 800 | 1600 |
| Thumbnail | 400 | 800 |
| Product image | 1000 | 2000 |
| OG image (social) | 1200x630 | - |
| Favicon | 512x512 | - |
Rule of thumb: Resize to the maximum display width, then add 2x for retina displays. A blog image shown at 800px should be 1600px wide.
How to Resize
- Open the Image Resizer
- Upload your image
- Set the target width (height adjusts proportionally)
- Download the resized image
Pro tip: Resize FIRST, then compress. Compressing a 4000px image then resizing to 800px is wasteful - you're compressing pixels you'll throw away.
FAQ
Does resizing reduce image quality?
Downscaling (making smaller) is generally safe - you're removing pixels, not adding them. Upscaling (making larger) will reduce quality since the software must invent new pixels. Never upscale for web use.
Should I use srcset for responsive images?
Yes! The srcset attribute lets browsers pick the right image size for the device. Generate 2-3 sizes (small, medium, large) and let the browser choose.
Ready? Convert your images now - 100% free.
Resize Images Free →