Image Resizer

Features

• Exact pixel dimensions or percentage scaling
• Aspect ratio locking
• Contain, cover and stretch fitting modes
• Nine presets for common web and social sizes
• PNG, JPEG and WebP output

How to use it

1. Drop an image in.
2. Enter a width, the height follows automatically.
3. Or pick a preset for a standard size.
4. Download the result.

Upscaling, downscaling and the resampling problem

Downscaling discards information and generally looks fine. Upscaling invents it and generally does not, enlarging a 200-pixel image to 800 pixels cannot recover detail that was never captured, so the browser interpolates between existing pixels and the result looks soft. Machine-learning upscalers do better by hallucinating plausible detail, but that is a fundamentally different operation from what a canvas can do. If you need a larger image, start from a larger original.

The three fitting modes solve different problems when the target ratio differs from the source. Contain fits the whole image inside the target box and pads the remainder, so nothing is lost but you get bars. Cover fills the box completely and crops the overflow, which is what you want for a thumbnail or hero image. Stretch distorts the image to fit exactly, which is almost never what anyone actually wants, it is included because occasionally you genuinely need exact dimensions and do not care.

One quality note: the browser's default image smoothing is bilinear, which is fine for modest reductions but produces visible aliasing when shrinking dramatically, reducing to under a third of the original in one step tends to look rough. Doing it in two or three successive halvings gives a noticeably cleaner result. This tool sets imageSmoothingQuality to high, which mitigates but does not eliminate the effect.