Uploading full-resolution camera photos directly to your website is one of the most common web performance mistakes. A 4000x3000 JPEG can be 6-10MB, but your website likely displays it at 800px wide. That's 90% wasted bandwidth per image. Multiply by dozens of images per page, and your site becomes painfully slow.
Why Image Dimensions Matter
Browser rendering doesn't benefit from oversized images. A photo displayed in an 800px wide container looks identical whether the source is 800px or 4000px wide. But the 4000px version takes 5-10x longer to download and consumes significantly more memory, especially on mobile devices.
Recommended Dimensions by Usage
| Usage | Width (px) | Width @2x (retina) |
|---|---|---|
| Hero/banner image | 1920 | 3840 |
| Content image (full width) | 1200 | 2400 |
| Content image (in column) | 800 | 1600 |
| Thumbnail/card | 400 | 800 |
| Avatar/profile | 200 | 400 |
The Resize Workflow
- Determine your target size: Check your website's CSS. How wide is the container where the image displays?
- Create at 2x for retina: If the container is 600px, resize to 1200px. This ensures sharpness on high-DPI screens without excessive file size.
- Use the Resize tool: Open the Resize tool, set your target width, and let the height auto-calculate to maintain aspect ratio.
- Sharpen after resizing: Downsizing softens images. A quick pass through the Sharpen tool restores crispness.
- Compress the result: Use the Compress tool to optimize the file format and quality.
Responsive Image Strategy
For serious web performance, create multiple sizes of each image:
- 400px for mobile
- 800px for tablet
- 1200px for desktop
- 1920px for full-width hero images
Serve them with HTML's srcset attribute so the browser downloads only the size it needs.
Lazy Loading
Combine proper sizing with lazy loading. Images below the fold shouldn't load until the user scrolls to them. This is a one-line HTML attribute: loading="lazy".
Measuring the Impact
Use Google's PageSpeed Insights to measure your image performance. The "Properly size images" audit tells you exactly how much bandwidth you can save by resizing. It's common to see 50-90% savings on image-heavy pages.
Conclusion
Resizing images to match their display dimensions is the highest-impact performance optimization for most websites. The Resize tool handles this quickly, and combined with compression and sharpening, produces web-optimized images that load fast and look sharp - all processed in your browser.
Try it yourself
Free, private, runs in your browser. No sign-up required.