image · 7 min read

How to resize an image without making it blurry

Smaller is safe and larger is not. Both follow from the same fact about what a pixel is.

Resizing is the one image operation everybody performs and almost nobody is taught. It looks like a single slider with one number in it, and behind that number is a decision about which pixels survive — or, going the other way, about what to invent.

How to resize an image in pixels

Set the width, let height follow

Give the new width and keep the aspect ratio, so the height follows the original proportions and nothing distorts. For a web page, 1600 pixels on the long edge is generous and 1200 is plenty inside an article. Going smaller is safe; going larger is where blur comes from.

What a resize actually does

An image is a grid of measurements. Each pixel is one reading of colour at one point, and the file is nothing but those readings in order. Resizing means producing a different-sized grid from the one you have, and there is no arrangement in which the new grid lines up with the old.

Going down, the software has more readings than it needs, so it averages groups of them into one. Information is lost, but every new pixel is built from pixels that were really there. The result is a smaller, honest picture — and often a slightly cleaner one, since averaging suppresses noise.

Going up, it has fewer readings than it needs and has to fill the gaps. Every method for that is a form of guessing from neighbours, and the guesses are correct only where the image was already smooth. Edges — the part your eye actually reads — are exactly where guessing fails.

Why enlarging cannot work

The detail is not hiding in the file waiting to be brought out. It was never recorded. A 400-pixel-wide photograph contains four hundred columns of measurement, and asking for eight hundred is asking for four hundred columns that no camera ever took.

This is why the enhance button in films is a joke among people who work with images. The best an enlargement can do is produce something that does not look obviously wrong at a glance: soft where it should be sharp, and smooth where there should be texture.

Machine-learning upscalers change what kind of guess is made, not whether one is being made. They hallucinate plausible detail from having seen many similar images, which is genuinely useful for a photograph and genuinely dangerous for anything where the detail is the point — a document, a licence plate, a diagram. The output looks sharper and is less true.

The practical rule has no exceptions worth learning: find a larger original. Enlarging is what you do when there is none, knowing what it costs.

Keeping the proportions

Every resize dialogue has a lock or a chain icon, and it is doing one thing: computing the height from the width so the ratio is unchanged. Break it and the image stretches, which is visible immediately on any face and subtly wrong on everything else.

When a shape genuinely has to change — a square avatar from a landscape photograph, a banner from a portrait — crop rather than stretch. Cropping loses the edges and keeps everything else honest; stretching keeps all of the picture and makes every part of it wrong.

The arithmetic is one division. A 4,000 × 3,000 photograph is 4:3; at 1,200 wide it is 900 tall. Any resize tool worth using does this for you, and the calculator does it when you are working out sizes before touching the file.

The sizes worth resizing to

1600 px on the long edge — a full-width image on a web page, with enough headroom to stay sharp on a high-density screen.

1200 px — an image inside an article. Almost no layout shows one wider than this.

400 px — thumbnails and avatars, at twice the displayed size.

Whatever the platform states — every social network re-encodes what you upload. Giving it the dimensions it asks for means its own resize does nothing, which is the only way to control the result.

The reason all four are stated in pixels is that pixels are the only real dimension an image has. Inches and centimetres are printing instructions, and DPI is a note stored beside the file rather than a property of it.

Resizing is the cheapest saving there is

File size follows pixel count. Halving both dimensions removes three quarters of the pixels, and it does so before the encoder has made a single decision — so it beats any quality setting, and it beats it without visible cost when the image was oversized to begin with.

A phone photograph is around 4,000 pixels wide. Displayed at 800, it is carrying twenty-five times the data anyone will see, and the browser throws the surplus away after downloading all of it. Resize first, then compress — in that order, because compressing an oversized image spends effort on pixels that are about to be discarded.

The short version

Resize down freely and up only when there is no larger original. Keep the ratio locked and crop when the shape has to change. Aim at the size the image will be seen at, and do it before compressing rather than after.

All of it happens here in your own browser, on a file that is never uploaded — which also means you can resize the same photograph three ways and compare them before deciding, without sending anything anywhere to find out.

Questions

How do I resize an image in pixels?

Give the new width in pixels and let the height follow the original proportions, which is what keeping the aspect ratio means. A photograph destined for a web page rarely needs more than 1600 pixels on its long edge, and one inside an article rarely more than 1200. Resizing downwards throws away pixels and looks the same or better; resizing upwards has to invent them, and that is where blur comes from.

Why does my image get blurry when I make it bigger?

Because the pixels being added were never photographed. Enlarging means the software has to decide what belongs between two existing pixels, and every method for that is a form of averaging — so the new pixels are blends of their neighbours rather than detail. The result is soft at best and mushy at worst, and no setting avoids it. Detail that was not captured cannot be recovered.

Does resizing an image reduce its file size?

Yes, and usually far more than the quality slider does. File size follows the pixel count, so halving both dimensions removes three quarters of the pixels before the encoder starts. An image stored at 4,000 pixels wide and displayed at 800 is carrying twenty-five times the data anyone sees.

What size should I resize an image to?

To the size it will be seen at, doubled if it needs to look sharp on a high-density screen. 1600 pixels on the long edge covers most full-width web images, 1200 covers images inside articles, and 400 covers thumbnails. Social platforms re-encode whatever you give them, so matching their stated size saves them doing it badly.

What is the difference between resizing and cropping?

Resizing keeps the whole picture and changes how many pixels describe it. Cropping keeps the pixel density and throws away the edges. If the shape has to change, cropping decides what is lost and resizing does not — which is why stretching to a new shape, the third option, distorts everything and should never be the answer.

Can I change an image’s pixels without changing its file size?

Not in any useful direction. Fewer pixels always means a smaller file at the same quality, and more pixels means a larger one. What can be changed without touching the pixels is the DPI number, which only says how large to print the image and has no effect on the file — that is usually what someone means when they ask.

Tools from this guide

More image tools — all of them running in your browser, none of them uploading a file.