Oversized images are one of the most common reasons websites load slowly. The right image size depends on where it's being displayed, but a few practical guidelines cover most situations.
Match the Image to Its Display Size
The core rule: an image should never be dramatically larger than the space it's displayed in. If a photo is shown at 800 pixels wide on your page, uploading a 4000-pixel-wide original forces visitors to download five times more data than necessary, for zero visual benefit.
Common Website Image Dimensions
- Full-width hero banner: 1920 x 1080 px
- Blog post featured image: 1200 x 630 px
- In-content blog images: 800-1000 px wide
- Product thumbnails: 400-600 px wide
- Author avatars / small icons: 100-200 px wide
File Size Targets, Not Just Dimensions
Dimensions are only half the story — file size matters just as much. As a general target, aim to keep individual web images under 200KB where possible, and hero/banner images under 300-400KB even at larger dimensions. Combining correct resizing with compression at 75-85% quality typically gets you there without visible quality loss.
Responsive Images: One Size Doesn't Fit All
Modern websites often serve different image sizes to different devices — a smaller version for mobile, a larger one for desktop. If you're managing this yourself rather than through a platform that automates it, consider preparing at least two sizes for your most important images: one for mobile, one for desktop.
Quick Checklist
- Resize to the actual display dimensions, not your camera's original resolution
- Compress after resizing, not before
- Aim for under 200KB per image where practical
- Use WEBP where possible for the smallest file sizes
You can resize and compress your images to the right dimensions for free, directly in your browser, with our Resize Image and Compress Image tools.