Resizing images for the web
Resizing is the single most effective thing you can do to an oversized image — and the easiest to get wrong in ways that are invisible until later.
Last updated: 2026-10-11
Think in pixels, not in DPI
Screens are measured in pixels. An image displayed at 800 CSS pixels wide needs roughly 800 device pixels at standard density, or 1600 on a high-density display. DPI (or PPI) describes how a printer lays ink on paper; it has no effect on how a browser draws an image. Setting an image to 300 DPI and leaving it 6000 pixels wide does nothing for the web.
So ignore the DPI field and answer one question instead: how wide will this image be displayed? Resize to that number, with headroom for high-density screens if the image is important.
Common target sizes
| Use | Suggested longest edge |
|---|---|
| Full-width hero image | 1920 px (plus a 2× variant if needed) |
| Article body image | 1200–1600 px |
| Card / thumbnail in a grid | 600–800 px |
| Avatar or small icon | 128–256 px |
| Email attachment or preview | 1000 px |
These are starting points, not rules. The principle is that the file only needs to be as large as the largest place it will be shown.
Shrink, don't stretch
Enlarging an image does not add detail — it interpolates. A 400 px photo stretched to 1600 px looks soft and blocky, and it is four times the file size for a worse result. Because that is almost never what someone wants, upscaling is off by default in the resizer: if your numbers would enlarge the image, the output stays at the original size instead.
There are legitimate reasons to upscale — preparing print files, for instance — which is why it is a switch rather than a hard restriction. It is just not the default.
Keep the aspect ratio locked
Aspect ratio is width divided by height: a 3:2 photo is 3000×2000. If you type a new width while the ratio is locked, the height is derived and the image keeps its shape. Unlock it and you can set both numbers freely — useful for forcing output into a fixed slot, but it will stretch the image if the new ratio does not match the old one.
When you want a specific shape, cropping is the right tool and stretching is not. Crop removes pixels from the edges to reach the target ratio; resize then scales the result. Doing it in that order avoids distortion.
Percentage versus pixels
Percentages are handy for a batch of mixed sizes, where a fixed pixel width would destroy the small images and barely dent the large ones. "50%" is a rule that applies fairly to every file. Explicit pixels are better when the output has to match a fixed layout. Both work on the whole batch at once.
Order of operations in a batch
- Crop to the shape you need — this changes what the image contains.
- Resize to the pixel dimensions you need — this changes how big it is.
- Compress or convert to control the file size and format.
If you crop 20% off the width and then resize to 1600 px wide, the 1600 px refers to the cropped image, not the original. Getting the order wrong usually shows up as an image that is slightly the wrong size, which is easy to miss across a large batch.
A note on quality
Resizing down already discards detail, which means it also makes images compress better. A downscaled photo at quality 0.85 is often smaller than the original at quality 0.85 for two reasons, not one. If you are chasing a size target, resize before you start lowering quality — the quality reduction will hurt the visible result more.
Open the Bulk Image Resizer to try these numbers on your own files.
Keep reading
- How to compress images without uploading them — What actually happens when a browser compresses an image, how to pick a quality level, and why a PNG will never shrink from a quality slider.
- JPEG, PNG, WebP and AVIF: choosing the right format — When each format is the right answer, what transparency costs you, and how EXIF orientation quietly affects every rotated photo.