You shrink a 4000-pixel-wide photo down to 800 pixels for a blog post and it comes out soft — not obviously broken, just slightly mushy next to the original. Or you scale a small image up and it turns into a smear. Both are the same question: what happens to the pixels when you try to resize an image without losing quality, and why does the answer sometimes disappoint you?
The short version: resizing and compressing are two different operations that people constantly conflate. This post is about the first.
Resizing and compressing are not the same thing
Two operations shrink an image, and they work differently.
- Resampling changes the pixel dimensions: 4000x3000 becomes 800x600. Information is genuinely thrown away — or, going the other direction, genuinely made up.
- Compression leaves pixel dimensions untouched and changes how efficiently those pixels are stored. A JPEG at quality 90 and the same JPEG at quality 60 are both still 4000x3000.
Tools labelled resizer do the first; tools labelled compressor do the second. If the problem is a file too large to email, compression is the lever and How to Compress Images Without Losing Quality covers it. If the problem is wrong dimensions, you want resampling — and blur is the risk.
What resampling actually does
An image is a grid of pixels. Resize it and you have to produce a different grid, whose sample points almost never land on the old ones. Scale 1000 pixels down to 700 and each output pixel sits at a fractional position between input pixels. Something must decide what colour goes there. That decision is interpolation.
CSS is a convenient place to see the families named. MDN describes pixelated and crisp-edges as using nearest neighbour or similar algorithms that preserve contrast and edges, and smooth as using an algorithm that smooths colours, such as bilinear interpolation, intended for photographs.
- Nearest neighbour copies the closest input pixel. Fast, keeps hard edges, produces visible blockiness. Right for pixel art, wrong for a photo.
- Bilinear blends surrounding pixels. No blockiness, and slightly soft, because blending is a kind of blur.
- Bicubic and Lanczos weigh a wider neighbourhood to preserve more apparent sharpness. These are what photo software uses by default.
Every method that avoids blockiness does so by averaging, and averaging is low-pass filtering. That is the mechanism behind the softness — not a flaw in your resizer, but what smooth resampling is.
Why downscaling is mostly safe and upscaling is not
Downscaling starts with more information than it needs. Several input pixels combine into one, and the result is a defensible average of things that were genuinely there. You lose detail the smaller image had no room for anyway, which is why a downscaled photo usually looks fine at its new size.
Upscaling has the opposite problem. Going from 800 pixels wide to 2000, you need 2000 columns of information and have 800. The extra pixels are not recovered, they are invented — interpolated from neighbours, which adds nothing not already implied. The result carries exactly as much detail as the small one, spread over more area, which the eye reads as blur.
Machine-learning upscalers change the character of this but not the fact: they generate plausible detail based on what similar images look like. For a wall print of a landscape that is often fine. Where detail carries meaning — a licence plate, a serial number, a face you need to identify — the invented detail is a guess, and treating it as evidence is a mistake.
Downscale freely, upscale reluctantly, and if there is a route back to the original, take it.
Why your downscaled image still looks soft
Three causes, worth telling apart.
- Nothing was resampled at all. Setting width and height on an
<img>tag, or dragging a corner in a document, leaves the original pixels in the file and lets the renderer scale them on the fly. MDN notes thatimage-renderinghas no effect on non-scaled images — it only matters when displayed size differs from natural size, exactly this case. Browser scaling is usually decent, but you are shipping the full-size file to every visitor. - The averaging softened edges, as it must. Expected, and it is what a sharpening pass after resizing is for. Photo workflows have sharpened after downscaling for decades. A little is corrective; too much produces bright halos along edges.
- You are judging it at the wrong size. A 600-pixel image inspected at 200 percent zoom looks soft however well it was resampled. Judge at 100 percent.
A fourth cause is not resizing at all: blocky squares and mottled skies are JPEG compression artefacts, applied after the resize.
How to resize an image without losing quality
You cannot change the pixel count with zero loss. That is a definitional limit, not a tooling one. What you can do is avoid the avoidable losses:
- Resize from the largest original you have, not a copy already resized. Each pass re-averages already-averaged pixels.
- Resize before compressing. Downscaling a heavily compressed JPEG scales its artefacts along with the picture.
- Do one resize, not a chain. 4000 to 1000 in a single step beats 4000 to 2000 to 1000.
- Resample to the exact size you need rather than letting a browser or document scale it.
- Add a light sharpening pass afterwards if the result looks flat, stopping before halos appear.
- Use PNG for screenshots, logos and line art, where JPEG artefacts show badly.
The image resizer here does the resampling in your browser, nothing uploaded; the image compressor handles the other half. If the file will not open at all because it came off an iPhone, that is a format problem, not a size one — see HEIC vs. JPG: Why Your iPhone Photos Are Not JPEGs.
Aspect ratio, Instagram, and what without cropping really means
Aspect ratio is width divided by height, and resampling preserves it as long as you scale both dimensions by the same factor. Force an image into a ratio it does not have and it either stretches or gets cropped.
Which is why resize for Instagram without cropping is impossible as stated. What people mean is padding: scale the image down until it fits inside the target frame, then fill the leftover space with a solid colour or a blurred copy. Nothing cropped, nothing stretched, the picture just sits smaller in the frame.
The numbers move, so date them. Instagram's Help Centre states that a shared photo is uploaded at the best quality resolution possible, up to 1080x1080 pixels. Meta's Instagram Platform documentation for images posted through its API specifies an aspect ratio within a 4:5 to 1.91:1 range, a minimum width of 320 pixels (scaled up if smaller), a maximum width of 1440 pixels (scaled down if larger), JPEG, sRGB and an 8 MB cap. Both were current as of September 2026 and are worth rechecking at the source rather than trusting a blog post, this one included.
The durable version: aim between 4:5 and 1.91:1, and upload above the display size so the platform downscales rather than upscales.
DPI does not matter for screens
A stubborn piece of advice says to set images to 72 DPI for web and 300 DPI for print. The first half is meaningless.
DPI lives in the file's metadata. In a JPEG, the JFIF header carries Xdensity and Ydensity fields plus a units byte, where 0 means the values describe a pixel aspect ratio with no units, 1 means dots per inch and 2 dots per centimetre. It is a note about intended physical output, and it changes no pixels.
The web does not consult it. CSS defines its own anchor: per MDN, 1px equals 1in / 96 and 1in equals 96px. An image lays out by its pixel dimensions and the CSS applied to it, so a 1200x800 image at 72 DPI and one at 300 DPI render identically in a browser.
DPI becomes real in print, where it combines with pixel dimensions to set physical size — 1200 pixels at 300 DPI is a 4-inch print. So work backwards from the print size you need, and for screens think only in pixels.
Set exact pixel dimensions or scale by percentage — resampled in your browser, nothing uploaded.
Open Image Resizer →Frequently asked questions
Because smooth resampling works by averaging neighbouring pixels, and averaging is a mild blur. If you scaled the image up, there is a second and larger cause: the extra pixels were interpolated rather than recovered, so the enlarged image contains no more real detail than the small one did. Downscaling normally looks fine at its new size; a light sharpening pass afterwards restores the apparent edge contrast that averaging took off.
Usually one of two reasons. Either it was not resampled at all — setting width and height in HTML or dragging a corner in a document leaves the original pixels in place and lets the renderer scale them each time it draws — or it was resampled correctly and the averaging softened the edges, which is normal and is what output sharpening is for. Also check you are viewing it at 100 percent rather than zoomed in.
Not directly, because file size is set by compression rather than by pixel dimensions. Reducing dimensions does reduce file size, but not by a predictable amount — that depends on the content of the image. To hit a target like 200 KB, resize to the pixel dimensions you actually need first, then adjust compression quality downward until the file fits. Tools that advertise a target file size are doing exactly that, in a loop.
Pad it rather than crop it. Scale the whole image down so it fits entirely inside the target frame, then fill the remaining space with a solid colour or a blurred copy of the picture. That keeps every part of the photo visible without stretching it. Nothing can change an image's aspect ratio without either cropping or distorting, so padding is the only way to have both.