Resizing is the most overlooked step in image optimisation — and the one that saves the most. A camera photo can be 6000 pixels wide, but a blog displays it at maybe 1000 pixels. Serving the original means the browser downloads (and the visitor pays for) five times more image than they’ll ever see. This guide covers the right sizes, how to avoid distortion, and how to resize a whole batch at once.
TL;DR — Resize images to the dimensions they’re actually displayed at, keep the aspect ratio locked, and scale down rather than up. Do a whole folder for free in the bulk image resizer.
What size should web images actually be?
There’s no single answer — match the image to the slot it fills. These are reliable starting points:
| Placement | Recommended width |
|---|---|
| Full-width hero / banner | 1600–2000px |
| In-content / blog image | 800–1200px |
| Sidebar / card thumbnail | 300–500px |
| Avatar / icon | 64–256px |
For high-density (Retina) screens, you can export at 2× the display size and let the browser scale it down — a 1200px image shown in a 600px slot stays crisp. Beyond 2× there’s no visible benefit, only bigger files.
Why aspect ratio matters
The aspect ratio is the relationship between width and height. Change one without the other and the image stretches — faces get wide, circles become ovals.
The rule is simple: lock the aspect ratio. Set the width you want, and the height adjusts proportionally so the image scales evenly. You only unlock it when you deliberately want exact dimensions and are willing to crop rather than distort.
Tip: If you need an exact square or 16:9 frame, don’t stretch — crop to the ratio first, then resize. Stretching is always visible; cropping never is.
Resize down, not up
- Scaling down removes pixels you don’t need. The result is sharp and the file is smaller. This is what you want almost every time.
- Scaling up (enlarging) forces the tool to invent pixels, which softens the image. If you genuinely need a bigger image, use an AI upscaler instead of a plain resize — it reconstructs detail rather than just stretching.
Step by step: resize images for the web
- Decide the target width from the table above, based on where the image appears.
- Open the bulk image resizer and drop your images in.
- Enter the width in pixels (or a percentage to scale the whole batch evenly).
- Keep the aspect-ratio lock on so nothing distorts.
- Download the resized images, then compress them for the final saving.
Everything runs in your browser — no upload, no account, no limits. The same settings apply to your whole batch, so a folder of mixed photos all come out at a consistent size.
The optimisation order that works
For the smallest, sharpest web images, always do it in this order:
- Resize to display dimensions (this guide).
- Convert to WebP or AVIF — see the format guide.
- Compress with the quality slider — see compress without losing quality.
Skipping the resize step is the most common mistake. No amount of compression fixes an image that’s simply too large in dimensions.
Where to go next
- Compress images without losing quality — the finishing step.
- Convert images to WebP and AVIF — modern formats for extra savings.
- Crop an image to a fixed aspect ratio — when you need an exact frame.