How to Resize Images for the Web and Social Media
Uploading a 6,000-pixel photo where a 1,200-pixel one would do slows your page and wastes bandwidth. Resizing images to the right dimensions is one of the easiest performance wins there is.
Why image dimensions matter
Browsers download the full image file even if they display it smaller. A photo that’s 4,000 pixels wide but shown in a 800-pixel column forces visitors to download roughly 25 times more data than they need. Resizing to the display size makes pages load faster, improves Core Web Vitals, and saves mobile data.
Common target sizes
Exact requirements change over time, but these are reliable starting points:
- Website hero/banner: 1,600–2,000 px wide.
- Blog body image: 1,000–1,200 px wide.
- Thumbnail: 300–500 px wide.
- Social shares (Open Graph): 1,200 × 630 px.
- Square social post: 1,080 × 1,080 px.
Resize without distortion
The key is keeping the aspect ratio — the width-to-height proportion. Change only the width (or only the height) and let the other dimension scale automatically. Our Image Resizer has an aspect-ratio lock that does exactly this, plus a percentage mode for quick proportional scaling. Everything runs in your browser, so your images are never uploaded.
Resize, then compress
Resizing and compressing work best together. First resize to the right dimensions, then run the file through the Image Compressor to squeeze out remaining file size. For the format choice that affects size the most, see our PNG vs JPG vs WebP guide — and for the full workflow, how to compress without losing quality.
What about cropping vs. resizing?
Resizing scales the whole image to new dimensions. Cropping removes parts of the image to change its shape (for example, turning a landscape photo into a square for a profile picture). If a platform needs an exact aspect ratio like 1:1, you may need to crop first, then resize to the target pixel size.
Quick checklist
- Find the size the image will actually display at.
- Resize to that width with the aspect ratio locked.
- Compress the resized file.
- Export as WebP or JPG for the web.
Frequently asked questions
What size should images be for a website?
Most body images look great at 1,000–1,200 px wide, and hero images at 1,600–2,000 px. Match the dimensions to where the image is displayed.
How do I resize without stretching the image?
Keep the aspect ratio locked so width and height scale together. Our Image Resizer locks the ratio by default.
Should I resize or compress?
Both. Resize to the right dimensions first, then compress the file to reduce size further. Resizing usually gives the biggest savings.