Serving a 4000x3000 photo when the user only sees it at 800px wide wastes bandwidth, slows page load, and costs you Core Web Vitals points. Resizing images properly is one of the easiest performance wins.
Why image dimensions matter
Browsers download the full image file before scaling it down for display. A 5 MB photo displayed at 400px wide wastes most of that data.
The math is dramatic:
- 4000x3000 at 24-bit color = ~36 MB uncompressed
- 800x600 at the same color depth = ~1.4 MB uncompressed
- That’s a 96% reduction just from resizing
Even after JPEG compression, the proportional savings are similar.
What size should your images be?
Website content images
- Full-width hero: 1920px wide (or 2560px for Retina)
- Content images: 800-1200px wide
- Thumbnails: 300-400px wide
- Avatars/icons: 64-128px
Social media
| Platform | Recommended size |
|---|---|
| Instagram post | 1080x1080 |
| Instagram story | 1080x1920 |
| Facebook shared image | 1200x630 |
| Twitter post | 1200x675 |
| LinkedIn post | 1200x627 |
| YouTube thumbnail | 1280x720 |
- Max width: 600px (most email clients)
- File size: Under 200 KB per image
- Total email size: Under 1 MB for best deliverability
Aspect ratio
Aspect ratio is the proportional relationship between width and height:
- 16:9 — Widescreen, standard for video and hero images
- 4:3 — Traditional photo and screen ratio
- 1:1 — Square, common for social media and thumbnails
- 3:2 — Standard DSLR photo ratio
When resizing, maintaining the aspect ratio prevents distortion. Specify one dimension (width or height) and let the other adjust proportionally.
Retina and high-DPI displays
Modern screens (Retina, 4K) have 2x or 3x pixel density. For sharp images on these displays, serve images at 2x the display size:
- Image displays at 400px → serve an 800px image
- Use CSS to set the display size:
width: 400px
This doubles the file size, so balance sharpness against loading speed.
Batch resizing
When you have dozens of images to resize — product photos, blog post images, gallery updates — doing them one by one is impractical. Browser-based tools let you resize multiple images at once with the same settings, download them all, and move on.
Tips
- Resize before compressing — Compression artifacts are less visible on properly sized images
- Don’t upscale — Enlarging a small image just adds blur. Only downscale
- Use even dimensions — Some video encoders and image processors prefer even pixel counts
- Check file size after — If a resized image is still too large, apply compression