Downscaling in one jump is what makes images look cheap
A browser's canvas resize is a bilinear sample: for each output pixel it reads a small, fixed neighbourhood of the source. Going from 4000px wide to 400px in a single draw means each output pixel is decided by roughly four of the hundred source pixels it covers, and the other ninety-six are never read at all. That is what aliasing is, and it is why a one-jump resize turns fine detail into moire and clean edges into crunch.
Halving repeatedly fixes it for nothing. At each halving the neighbourhood the sampler reads is the area it represents, so every source pixel contributes to the result. Four extra draws on a 12-megapixel photo cost single-digit milliseconds, and the difference is plainly visible at the same output size. This page reports the step count on each file, and it is the one implementation detail in this section with a visible payoff.
Fit, fill and stretch are three different answers
With both sides set, a 4:3 photo cannot become a 16:9 box without giving something up. Fit inside keeps the whole image and lands inside the box, so the result is smaller than the box on one axis. Fill covers the box and overflows on one axis, which is what a cover image wants. Stretch forces both sides and distorts, which is almost never right and is here because occasionally it is.
Leaving the height at 0 sidesteps the question: the height follows the width and the aspect ratio is kept exactly. That is the setting most of the presets use.
Common problems
- The output is blurry. Upscaling cannot invent detail. Enlarging a 400px image to 1600px gives you a 1600px blur; the only fix is a larger source.
- The file got larger after shrinking. A PNG of a photograph re-encoded as PNG at a smaller size can still exceed a small JPEG. Use the compressor and change format if size is the goal.
- Text and screenshots look soft. Any resampling softens hard pixel edges. For screenshots, resize to an exact integer fraction, a half or a quarter, where the sampling grid lines up. Or do not resize them at all.
- The photo came out rotated. Some cameras store the image sideways with an EXIF orientation flag. The browser's decoder applies that flag, so the output here is upright and no longer needs it, which is why it can look different from what a file manager showed you.
Frequently asked questions
What size should a web image be?
No wider than twice its display width, and rarely more than 1600px for anything that is not a full-bleed hero. A 4000px photo in a 600px column costs your visitors the full download for detail their screen cannot show. The presets here cover the common targets, and the two-thirds of image weight most sites waste comes from this.
Does resizing change the format?
No. Each file comes back in the format it went in as, so a PNG stays a PNG. To change format, use the compressor, which encodes to a format you choose and shows what each one would cost.
How many images can I do at once?
Thirty. The limit is memory, not policy: a decoded image needs width × height × 4 bytes regardless of its file size, so a batch of 20-megapixel photos is gigabytes if they are all held at once. They are processed one at a time for the same reason.
Is anything sent to a server?
No. The decode, the resize and the encode all happen in a Web Worker on your device, and the page makes no request while it works. That is checkable not promised: open the network tab and watch.