Resize an Image Without Losing Quality
· 5 min read
Making an image smaller is safe and usually looks sharper, because a good resampling filter averages pixels rather than dropping them. Making it larger cannot invent detail that was never captured, so an enlarged image will look soft whatever tool you use. Always start from the largest original you have.
Making an image smaller is safe. Making it larger cannot invent detail that was never captured. Everything else about resizing follows from those two facts.
On this page
Downscaling is the safe direction
Reducing dimensions discards pixels, and a good resampling filter averages them rather than dropping them. The result usually looks sharper than the original did at that size, because detail is being condensed rather than thrown away.
This is why the advice is always to start from the largest original you have. You can always go down; you cannot meaningfully go up.
Upscaling and what it can and cannot do
Enlarging an image invents pixels by interpolating between the ones that exist. It can smooth the result, but the detail is not there to recover — a 400-pixel image blown up to 2000 will look soft no matter which tool does it.
If you need a larger version, find a larger original. Failing that, accept the softness rather than over-sharpening, which trades blur for halos and usually looks worse.
AI upscalers are a genuine exception, but a limited one. They do not recover the original detail; they generate plausible new detail based on what similar images look like. For a landscape that is often fine. For a face, a number plate or a document, the invented detail can be confidently wrong.
Resize ImageSet exact pixel dimensions, or pick a platform presetFit, fill and stretch
Fit scales until the whole image sits inside your dimensions, so nothing is cut off but one side may come out smaller than requested. Fill scales until it covers the dimensions completely and crops the excess evenly — the right choice when you need an exact size, like a profile picture. Stretch forces both dimensions and distorts, which is almost never what you want.
If in doubt, fill gives you the exact size you asked for and loses the least important part of the frame.
- Fit: nothing cropped, may not hit the exact size
- Fill: exact size, crops evenly from the centre
- Stretch: exact size, distorts — avoid
What size to actually target
The right dimensions come from where the image will be displayed, not from what the camera produced. Storing more pixels than the display can show costs bandwidth and buys nothing.
| Use | Target width | Note |
|---|---|---|
| Full-width hero | 1920px | 2560px only if the design is genuinely edge to edge |
| In-article image | 1200px | Comfortably covers a 2× display in a 600px column |
| Product thumbnail | 600px | Shown around 300px on most grids |
| Avatar | 400px | Square, cropped to fill |
| Email attachment | 2000px | Beyond this, size grows faster than usefulness |
Why your resized image looks soft on a phone
Phone and laptop screens pack two or three physical pixels into every CSS pixel. An image resized to exactly the width of its slot has one pixel for every three the screen can draw, so the browser stretches it and it looks soft.
The fix is to resize to roughly twice the display width and let the browser scale down. The file is larger than a 1× version but far smaller than the original, and it is the only way to get a crisp result on a modern screen.
Resize before you compress, not after
Compressing first spends the encoder's quality budget on pixels you are about to discard, and the artefacts it introduces get averaged into the smaller image rather than removed by it.
Doing it in the right order — resize, then compress — produces a visibly cleaner result at the same file size. It costs nothing except remembering which way round it goes.
Print is a different calculation
Screens care about pixels; print cares about pixels per inch. A photograph printed at A4 wants around 300 dpi, which works out to roughly 2480 by 3508 pixels. Anything less and the print looks soft however good the file is.
This is the one case where a large file is the correct answer. Resize for the screen and you will not have enough for the page; resize for the page and the web version is needlessly heavy. Export both from the original rather than converting one into the other.
Common questions
Does resizing an image reduce its quality?
Resizing down does not reduce visible quality — a good filter averages the discarded pixels into the ones that remain, which often looks sharper than the original at that size. Resizing up always softens, because the detail was never captured.
How do I resize an image without it getting blurry?
Only resize downward, and always from the largest original you have. Never enlarge a compressed web copy — you are magnifying the compression artefacts along with the picture.
What does 'lock aspect ratio' mean?
It keeps the width-to-height relationship fixed, so setting the width to 800px automatically sets the height proportionally. Unlocking it lets you type any two numbers, which stretches the image.
What resolution should I use for a website?
1920px wide for a full-width hero, 1200px for in-article images, 400–600px for thumbnails. Aim for about twice the display width so the image stays sharp on high-density screens.
Can I resize images in bulk?
Yes. Drop the whole set in and apply the same dimensions to all of them at once, which also keeps them visually consistent — useful for a product library or a set of blog thumbnails.
Should I resize or crop?
Resize changes the scale and keeps the whole frame; crop changes the framing and discards what falls outside. If the shape is wrong, crop. If only the size is wrong, resize.
Why does my image look soft on my phone but fine on my laptop?
The phone has a higher pixel density, so it draws two or three physical pixels for every one in your image and stretches to fill them. Resizing to about twice the display width fixes it.
What size should an image be for printing?
Around 300 dpi at the final print dimensions — roughly 2480 by 3508 pixels for A4. Screen-sized images do not have enough detail to print well, so export a separate copy from the original rather than enlarging the web version.