How to Resize Images for the Web: Dimensions, DPI and Format Guide
Oversized images are the #1 cause of slow websites. Learn the optimal image dimensions for websites, social media, and email, and how to resize without quality loss.
A 4000×3000 pixel photo from your camera is overkill for a website that displays it at 800×600. Serving oversized images is one of the easiest performance problems to fix — and it has a measurable impact on page load time and SEO.
Optimal Image Dimensions for Common Uses
- Full-width hero image: 1920×1080 px (or use srcset for responsive)
- Blog post featured image: 1200×630 px
- Instagram post: 1080×1080 px (square) or 1080×1350 px (portrait)
- Twitter/X post image: 1600×900 px
- LinkedIn post: 1200×628 px
- Thumbnail (card/grid): 400×300 px
- Product image (e-commerce): 800×800 px minimum
DPI for Web vs Print
For web use, DPI is irrelevant — what matters is pixel dimensions. A 72 DPI setting vs 300 DPI makes no difference in how an image looks on a screen; it only affects printing. Web browsers ignore DPI metadata and just use pixel dimensions.
Maintaining Aspect Ratio
When resizing, always lock the aspect ratio to avoid distortion. If you need to fit an image in a specific box (e.g., 200×200 px), crop after resizing — don't stretch. Distorted images look unprofessional and reduce perceived quality.
Resize Without Losing Quality
Scaling down preserves quality (you're removing pixels). Scaling up degrades quality (you're inventing pixels). Always start with the largest version of your image and resize down to your target dimensions.
Use our Image Resize tool to resize any image to exact dimensions in seconds, directly in your browser.