Resizing images without turning them to mush
Resizing sounds trivial. A 4000-pixel photo needs to be 1000 pixels, so the program makes it 1000 pixels. But anyone who has resized a photo of a brick wall, a striped shirt or a page of text has probably seen the results go wrong: jagged diagonals, strange rippling patterns, text that is somehow both blurry and sharp. Enlarging goes wrong in a different way.
Shrinking is about combining pixels
When you reduce 4000 pixels to 1000, each new pixel has to represent a 4 × 4 patch of old ones. The quality of the result comes down to how that patch is summarised.
The crudest method, called nearest neighbour, just picks one of the 16 old pixels and ignores the rest. It is fast, and on photos it is awful. Fine detail is sampled almost at random, so thin lines break up, diagonal edges become staircases, and regular patterns like fabric, brickwork or window blinds turn into swirling interference patterns called moiré.
Better methods average the whole patch, weighting the pixels near the centre more heavily. Names you might see include bilinear, bicubic and Lanczos. They produce smooth, faithful results, provided they look at all the pixels that matter.
The one-big-jump problem
Here is a catch that trips up a lot of software, including many browsers' built-in scaling. Bilinear scaling, in its simple form, only ever looks at the 2 × 2 nearest old pixels for each new pixel. That is fine for small reductions. For a reduction from 4000 to 1000 pixels, each new pixel should represent 16 old ones, but only 4 are consulted. The other 12 are skipped, and the shimmer and jaggedness come back.
The classic fix is to shrink in steps: halve the size, halve it again, and finish with one smaller adjustment. Each halving averages 2 × 2 pixels properly, so by the end, every original pixel has contributed. The tools on this site resize this way for large reductions, which is why a 48 MP phone photo shrunk to a thumbnail still looks clean.
A touch of sharpening
Averaging is honest but soft. A downsized photo can look slightly less crisp than the original viewed at the same size, because averaging rounds off the very finest contrast at edges. Photographers often apply a small amount of sharpening after resizing for the web. If you do, keep it subtle. Over-sharpening produces bright halos along edges, which look worse than the softness did.
Enlarging cannot add detail
Making an image bigger is a different problem. The file only contains the detail that was captured. Enlarging spreads that detail over more pixels, and the new pixels in between have to be invented.
Traditional methods invent them by blending neighbours. The result is smooth but soft, like looking through slightly dirty glasses. Nearest neighbour, by contrast, just repeats pixels, which gives a blocky look. That is exactly right for pixel art and screenshots of pixel art, and exactly wrong for photos.
AI upscalers are a third option. They are trained on millions of images and fill in the gaps with plausible detail: pores, hair strands, bark texture. The results can look impressively sharp. It is worth remembering what they are doing, though. The added detail is a guess about what was probably there, not a recovery of what was. For fun, for old family snaps, that can be fine. For evidence, identification, or anything where accuracy matters, it is not.
Keeping proportions
A separate way to ruin a resize is to change the width and height by different amounts. Faces get wider, circles become ovals. Most tools lock proportions by default. If you need an exact size, say 1080 × 1080 from a rectangular photo, change the shape first by cropping to the right ratio, then resize. Stretching is almost never the answer.
An order of operations that works
- Start from the best original you have. Not a copy that has been through a messaging app.
- Crop first, so you are not spending pixels on parts you will throw away.
- Resize once, directly to the final size. Repeated resizing, each time from the previous result, compounds softness.
- Compress last. Choosing JPG quality or WebP quality is the final step, done once.
That order also happens to make files smallest. Resizing before compressing means the compressor has less to work with, and a 2000-pixel image at quality 80 is a fraction of the size of a 4000-pixel image at quality 60, while looking better.
How big is big enough?
For screens, think about the largest size the image will ever be shown, then allow for high-density displays, which use two or three device pixels per CSS pixel. An image shown 800 pixels wide on a web page looks sharp on a modern laptop at about 1600 pixels. For print, the answer depends on print size and viewing distance, which is a topic of its own: see DPI is mostly a label.