Image Resizer: How It Works
Resizing an image sounds like one operation and is really three decisions: the target dimensions, what happens to the aspect ratio, and which resampling method redraws the pixels. Each affects how the result looks.
Preserve the aspect ratio
Aspect ratio is width divided by height. Change one dimension without the other and the image stretches — instantly obvious on faces and circles, and the most common resizing mistake.
To fit a target width, compute the factor and apply it to both: a 3000 × 2000 image resized to 1200 wide has a factor of 0.4, giving 1200 × 800.
When an image must fill a fixed frame of a different ratio, crop rather than stretch. Cropping loses content at the edges; stretching distorts everything.
Upscaling loses quality
Reducing an image discards information; enlarging one must invent it. Traditional resampling interpolates between existing pixels, which produces softness rather than detail — the information was never captured.
Machine-learning upscalers do better by predicting plausible detail from training data, but they are generating rather than recovering. For anything evidential or precise, treat upscaled detail with suspicion.
Resampling methods
| Method | Character | Best for |
|---|---|---|
| Nearest neighbour | Hard edges, blocky | Pixel art, where blockiness is intended |
| Bilinear | Fast, slightly soft | Quick previews |
| Bicubic | Sharper, good general quality | Photographs — the usual default |
| Lanczos | Sharpest, occasional ringing | Large reductions of detailed images |
For large reductions — more than about half — resizing in two or three steps often gives a cleaner result than one large jump, because each step has more source pixels to average from.
Sizes worth knowing
| Use | Dimensions |
|---|---|
| Open Graph / social preview | 1200 × 630 |
| YouTube thumbnail | 1280 × 720 |
| Instagram square / portrait | 1080 × 1080 / 1080 × 1350 |
| Full-width web hero | 1920 wide |
| Blog body image | 800–1200 wide |
| Favicon | 32 × 32 and 180 × 180 |
High-density displays
A screen at 2× device pixel ratio needs an image roughly twice the CSS display width to look sharp. An image shown at 400 CSS pixels should be around 800 pixels wide. Going beyond 2× yields no visible improvement on almost any display and simply wastes bandwidth.
The better approach is responsive images — a srcset offering several sizes so the browser picks what the device actually needs, rather than sending one large file to everyone.
Work from the original
Always resize from the highest-resolution source you have. Resizing an already-resized image compounds quality loss, and with lossy formats it compounds compression artefacts too. Keep originals; export derivatives.