Resize an Image

Downscaling well is harder than it looks. The Canvas drawImage call that browsers provide samples only a handful of source pixels per output pixel, so shrinking a 4000-pixel image straight to 1000 pixels silently ignores most of the picture and produces shimmering, aliased edges - visible as stair-stepping on diagonal lines and moire on fabric. The fix used here is iterative halving: the image is reduced in successive steps of at most 50 percent, so every source pixel contributes to the result. Detail-rich photos come out noticeably cleaner.

Enlarging is a different story with a hard truth attached: new pixels have to be invented. Interpolation spreads existing information across a bigger grid, which reads as soft at moderate enlargement and mushy beyond about 2x. For serious enlargement, an upscaler that reconstructs plausible detail does better than plain interpolation - this tool keeps enlargement honest and simple, which is exactly right for bumping a 900-pixel image up to 1080.

Think in terms of the destination, not the source. Screens do not care about DPI - a 1920x1080 monitor shows 1920x1080 pixels regardless of what the metadata says. Doubling for high-density displays means a 600-pixel-wide layout slot is best served by a 1200-pixel image. Sizing to roughly twice the CSS display width is the practical rule that keeps images sharp on retina screens without wasting bandwidth.

Percentage mode suits batch-of-one thinking: 50 percent quarters the pixel count and roughly quarters the file weight before compression even enters the picture. And when a form demands unusual exact dimensions - 600x600, 413x531, 200x230 - type both numbers with the ratio unlocked, but expect distortion unless you crop to the right shape first.