How to resize an image without losing quality
Making an image smaller almost never costs visible quality. Making it bigger almost always does. Once you know why, "resize without losing quality" turns into three concrete habits.
Processed locally in your browserResizing has a good direction and a bad direction. Going down, the software has more information than it needs and throws away the surplus intelligently. Going up, it has less than it needs and has to invent the rest. Most disappointment with resizing comes from expecting the second to behave like the first.
This guide is about protecting quality specifically. For the mechanics of exact sizes, percentages, bounding boxes and fit modes, read how to resize images the right way.
Why downscaling is safe
To turn a 4000px image into a 1000px one, the resampler averages groups of pixels into single output pixels. Every output pixel is derived from real data. Detail is lost in the sense that there is less of it, but nothing is fabricated, and at the new size there is nothing missing to see.
This is why a 4000px photo displayed at 1000px wide on a page is pure waste. The browser downscales it on every visit, on every device, and the visitor pays for the extra pixels in download time. Resizing it once, properly, is free quality.
Why upscaling does not work
Enlarging a 500px image to 2000px means producing sixteen output pixels for every original one. Fifteen of them have to be guessed from their neighbours. Interpolation can make that guess smooth, so the result is not jagged — but smooth is not the same as detailed. Text stays fuzzy, textures turn waxy, and edges gain a faint soft halo.
Machine-learning upscalers do better, because they have seen many images and can hallucinate plausible detail. Plausible is the key word: the detail they add was never in your photo. For a background texture that is fine. For a document, a licence plate or a face you are going to print, it is not evidence of anything.
Three habits that keep resized images sharp
- Resize from the original, not from a copyEach save of a lossy file compounds the damage. Going back to the master and exporting once gives a visibly better result than resizing something you resized last week.
- Resize before you compressFile size scales roughly with pixel count, so dimensions do most of the work. Compressing a huge image and then shrinking it wastes both the effort and the quality.
- Resize once, in one stepHalving an image three times in a row is three rounds of resampling and, in a lossy format, three rounds of re-encoding. Go straight to the final size.
Keep the aspect ratio, or crop deliberately
Typing a width and a height that do not match the original's proportions gives you a stretched image — the most visible quality problem of all, and the one people notice fastest. Faces become slightly wrong in a way that is hard to name and impossible to unsee.
The Image Resizer keeps the ratio locked by default. When you genuinely need a fixed frame — a 1200 × 630 social card, say — use a fit mode instead of unlocking the ratio: cover fills the frame and trims the overflow, contain fits the whole image and pads the gap. If the crop needs to fall in a particular place, do it deliberately in the Image Cropper first.
The DPI myth
For anything shown on a screen, DPI is stored metadata and nothing more. A 1000 × 1000 image at 72 DPI and the same image at 300 DPI are pixel-for-pixel identical and display identically. Changing the number does not add quality, because it does not add pixels.
DPI only becomes real at print, where it describes how the pixels are distributed across paper. The useful calculation is pixels ÷ inches: a photo printed 8 inches wide at 300 DPI needs 2400 pixels across. If your file has 1200, no DPI setting will fix it — but printing it 4 inches wide will.
Sensible target sizes
| Use | Long edge | Note |
|---|---|---|
| Full-width hero image | 1920–2400px | Cap it; visitors on phones do not need more |
| In-article image | 1200–1600px | Comfortable on a high-density display |
| Thumbnail or card | 400–800px | Twice the displayed size covers retina screens |
| Email attachment | 1600px | Keeps the message small enough to send |
| Print at 300 DPI | Inches × 300 | An 8×10 print needs about 2400 × 3000 |
"Twice the displayed size" is the rule for high-density screens, and it stops there. Three times is not sharper in any way anyone can see, and it triples the bytes.
Resizing a whole folder
The resizer takes multiple files at once. For a consistent policy across a library — nothing wider than 1600px, converted to WebP, compressed once — Batch Image Tools applies the chain in a single pass and returns a ZIP.
A max-box rule is usually better than a fixed width. "No image wider than 1600px" leaves smaller images untouched; "every image is 1600px wide" quietly upscales the ones that were smaller, which is the one operation you were trying to avoid.
Common questions
Tools in this article
Keep reading
- How to resize images without stretching, cropping or blurring themExact size, percentage or bounding box — which resize mode to use, what contain, cover, fill and inside really do, and why upscaling can't add detail.Guides
- Compressing JPEG, PNG and WebP without losing visible qualityEach format loses quality differently. A per-format playbook for JPEG, PNG, WebP and AVIF, how to spot the artifacts, and how to avoid compounding damage.
- How to reduce image file size for websitesRealistic size budgets for hero images, thumbnails and logos, the order of operations that gets there, and what to do in WordPress, Shopify and static sites.