How to resize an image the right way
Resizing is 90% picking the right target size, 10% math.
Rules of thumb
- Web hero: 1600–2000 px wide is plenty for retina displays.
- Blog inline: 800–1200 px wide.
- Thumbnails: 200–400 px wide, then let CSS scale down.
- Never upscale a small image — it just adds bytes.
Format trade-offs
- JPG: best for photos, universal support.
- PNG: keep for screenshots, logos, transparency.
- WebP: ~30% smaller than JPG, supported everywhere modern.
- AVIF: ~50% smaller, slower to encode, still worth it for hero images.
Try Resize image, Compress image, or AVIF encode.