Understanding image resizing
When pixels are added or thrown away.
Why an image looks crisp at one size and soft at another, and how the resampling algorithm picks the difference.
Resizing means resampling.
A digital image is a grid of samples — one colour value per pixel. Resizing changes the grid's resolution: the new image has more or fewer cells than the original. Each new cell has to be filled with a colour the original didn't necessarily provide, so the engine asks the algorithm: given the surrounding source pixels, what should this output pixel be? That choice is the resampling algorithm.
new size ≠ same pixels
Nearest, bilinear, bicubic, Lanczos.
Nearest-neighbour copies the closest source pixel — fast, ugly, and right for pixel art. Bilinear blends the four surrounding pixels weighted by distance — smooth, slightly soft, fast enough for thumbnails. Bicubic uses sixteen surrounding pixels and a cubic interpolation that preserves edges better — the default in Photoshop and most image libraries. Lanczos uses an even wider window with a sinc- based filter and is the gold standard when sharpness matters, at the cost of compute.
Downscaling and aliasing.
Shrinking an image throws information away. Done naively, it produces aliasing — moiré patterns on detailed textures, jagged edges on diagonals. The fix is to low-pass filter the source before sampling: blur slightly, then sample. Modern downscalers do this implicitly with a wide-window filter (Lanczos) or explicitly with a Gaussian step before nearest- neighbour. The result is gentler edges and clean detail.
Upscaling and the limits of pixels.
Going the other way — making an image larger than the source — can't add information that isn't there. Bicubic gives you a smoother soft picture; Lanczos a sharper one, but with ringing on hard edges. AI-based upscalers (Real-ESRGAN, the ones in modern cameras and TVs) hallucinate detail by predicting what should be there based on training data. They look impressive on faces and textures and unsettling on text and signage; the predicted letters are often wrong.
Aspect ratio is your responsibility.
Resizing to "800 pixels wide" without specifying height should default to keeping the original aspect ratio, because anything else stretches the picture. The few cases where you do want to change the ratio (cropping for a square social card, fitting an awkward print) are better handled by cropping first and resizing second — distortion is almost never the right answer.
One canvas, many sizes.
The web ships images in multiple sizes via srcset and sizes: phones get the small one, retina laptops the bigger one. The build pipeline does the resizing once at build time, with the best algorithm, so the browser doesn't have to. The same logic applies to thumbnails, app icons, social-share images — pick the best resampling once, then ship the cached output everywhere.
Read next