Resizing images without wrecking them

Resizing looks trivial and is not. Where the pixels come from, in what order the operation happens, and whether the image is getting bigger or smaller all change the result.

Three ways to reconcile a target box

When you ask for a specific width and height that the image's own proportions do not match, something has to give. This tool offers three answers, and the option is named in the result so you know which one ran.

• Fit scales the image down until it fits inside the box, keeping the proportions. The result may be smaller than the box in one direction. This is the safe default for shrinking photos to a maximum size.
• Fill scales until the box is covered, keeping the proportions, then crops the overflow evenly from both sides. Use it when the output must be an exact rectangle, such as a thumbnail grid. Be aware that it removes content.
• Stretch forces the exact dimensions and ignores the proportions. Only correct when the mismatch is intentional, because it visibly distorts faces and circles.

Shrinking is fine, enlarging is not

Shrinking an image with a good resampling filter works well. Details smaller than a pixel are averaged away rather than lost at random, and the result looks clean.

Enlarging cannot invent detail. Any enlargement is a guess about the pixels that were never captured, and the result looks soft or, with sharpening, slightly artificial. If you need a larger version of an image, the only real answer is a larger source. Vector artwork is the exception: an SVG can be rasterised at any size and stays crisp, because it is instructions rather than pixels.

Order of operations

Resize before you convert to a lossy format, not after. Resizing a JPG means decoding it, resampling, and re-encoding, so the image is going through the lossy encoder once regardless. Doing the resize first means only one generation of loss, and the smaller image encodes faster and smaller.

Choosing dimensions

Match the destination rather than picking round numbers. A common set of targets:

• Full-width web image: 1600 to 2400 pixels wide is ample for a high-density display.
• In-article illustration: 1000 to 1200 pixels wide.
• Thumbnail: 300 to 400 pixels wide.
• Social preview card: 1200 by 630 pixels, so use the fill mode and check what gets cropped.

Doubling the width quadruples the pixel count, and file size follows roughly that ratio for lossless formats. Halving the width is the single most effective way to shrink a PNG.