Downscaling works, upscaling mostly does not
Reducing an image's dimensions is a well-posed problem: you have more information than you need and must combine it sensibly. A good resampling filter averages contributions from each source pixel, so detail is condensed rather than discarded, and the result is genuinely sharp.
Enlarging is the opposite. The extra pixels are not recorded anywhere, so any algorithm must invent them by interpolating between neighbours. Bicubic interpolation produces a smooth, soft result; nearest-neighbour produces hard blocky edges, which is exactly right for pixel art and wrong for everything else. Neither adds detail, because the detail does not exist.
As a working limit, enlarging by up to about 150 percent is usually acceptable for screen use, and beyond roughly 200 percent softness becomes obvious. Machine-learning upscalers do better by hallucinating plausible detail from training data, which is convincing for textures and unreliable for text, faces and anything where accuracy matters.
Aspect ratio and the arithmetic of pixel counts
Changing width and height independently distorts the image, and the human eye is remarkably good at detecting it — a face stretched by five percent reads as subtly wrong before anyone can say why. Lock the ratio unless distortion is deliberate.
When a target ratio differs from the source, you must either crop or pad, and the choice is editorial. Cropping keeps the subject at full size but loses edges, which is fine for a background and destructive for a group photograph. Padding keeps everything and adds bars, which suits logos and product shots on a white background.
It is worth remembering that pixel count scales with the square of the linear dimension. Halving both width and height leaves a quarter of the pixels, so a 4,000 × 3,000 photograph reduced to 1,000 × 750 has one sixteenth the data — which is why resizing before compressing is far more effective than compressing harder at full size.
Sizing for actual displays
Screen images should be sized to their display dimensions, not their source dimensions. Serving a 4,000-pixel photograph into a 800-pixel column wastes bandwidth and forces the browser to resample on every layout, which costs memory and time on low-end devices.
High-density displays complicate this. A device with a 2× pixel ratio wants roughly twice the pixels of its CSS layout size, so an 800-pixel-wide slot ideally receives a 1,600-pixel image. Going beyond 2× has rapidly diminishing returns — 3× is essentially indistinguishable at normal viewing distances while costing another 125 percent in pixels.
The right pattern for the web is a responsive srcset offering two or three widths and letting the browser choose. If you are producing one file, target twice the largest layout width you expect and compress a little harder to compensate; downscaling in the browser is visually forgiving, while upscaling is not.