How to Resize an Image for a Website (Size, Format, Weight)
Resize ImageResize to exact pixels, percent or a preset. Free, no sign-up.Photos straight from a phone or camera are often 4000 pixels wide or more and several megabytes each. A website rarely shows them wider than about 2000 pixels, so most of that data is downloaded and thrown away, which slows every page down. Resizing first and compressing second fixes it.
1. Decide the width you need
Look at how wide the image is shown on the page. Most layouts top out at around 1200–1440 pixels of content width; a full-width banner fills the whole screen.
| Where the image appears | A sensible width |
|---|---|
| Full-width hero or banner | 1920–2400 px |
| Image inside an article column | 1200–1600 px |
| Half-width or two-column image | 800–1000 px |
| Thumbnail or card | 400–600 px |
| Logo or icon | Use SVG if you have it; otherwise twice the displayed size |
Why more than the displayed size? Phones and many laptops have high-density screens that show two device pixels per CSS pixel, so an image shown 700 pixels wide looks sharpest at about 1400.
2. Resize
- Open Resize Image and drop the image.
- Choose Pixels and type the width. Keep the lock on so the height follows and the image is not stretched.
- If you need an exact shape (for example a 16:9 card), type both numbers and choose Fill (crop) to fill the frame or Fit (add borders) to keep the whole picture.
- Download.
Shrinking keeps the image sharp. Enlarging a small image cannot add detail, so start from the largest original you have.
3. Compress
Resizing removes pixels; compression makes each remaining pixel cheaper.
- Open Compress Image and drop the resized images (several at once is fine).
- For photos, a quality around 70–80% is usually hard to tell apart from the original. Compare before and after on screen.
- If your CMS has a limit, turn on Target a file size instead.
- Download them all as a .zip.
4. Pick the format
- WebP: smaller than JPG at similar quality, and supported by all current browsers. A good default when your website or CMS accepts it.
- JPG: photos, when WebP is not accepted.
- PNG: screenshots, diagrams and graphics with sharp edges or transparency. Not for photos, where it makes files much larger.
Image Converter switches between them in bulk.
Checklist before uploading
- Width matches where it is shown (table above), not the camera size.
- File size: aim for well under 500 KB for large photos, and much less for thumbnails.
- File name describes the picture (
blue-ceramic-mug.webp, notIMG_4032.webp), which helps image search. - Add alt text in your CMS describing what the image shows.
Everything runs in your browser, so product photos and unreleased designs stay private. Save the final versions to your workstand next to the page or project they belong to.