How to Resize an Image Without Stretching or Distortion

Start with aspect ratio

Aspect ratio is the relationship between width and height. If the source ratio and target ratio differ, changing both dimensions independently stretches or squashes the content. A proportional resize changes one dimension and derives the other from the original ratio.

A fixed frame with another ratio requires a choice: crop some content, leave empty space, or redesign the frame. No resize algorithm can fill a mismatched rectangle while simultaneously preserving every pixel and its proportions.

• Fit or contain: show the whole image and accept unused space in the frame.
• Fill or cover: fill the frame and crop overflow.
• Pad: add a chosen background around the whole image.
• Stretch: force both dimensions; reserve this for intentionally non-photographic effects.

Choose crops around the subject

A centred crop is predictable but can remove faces, products, labels, or text near an edge. Choose a focal point for each important image, and preview crops at every ratio used by the design. Automated subject detection is a useful starting point, not a guarantee.

• Keep critical content inside a safe central area when one asset serves several ratios.
• Avoid cutting through faces, hands, text, logos, and product edges.
• Create an art-directed alternative when portrait and landscape placements need different compositions.
• Check small thumbnails because a technically correct crop can still become unreadable.

Resize once from the best source

Downscaling discards pixels; upscaling invents new pixel values by interpolation. Good resampling can make edges look smoother, but it cannot recover genuine detail. Repeated resizing and lossy saving compounds softness and compression artefacts.

Apply orientation before calculating dimensions, crop intentionally, resize from the highest-quality source, sharpen only if needed at the final size, and perform the final encode once.

• Keep an untouched master for future output sizes.
• Use a high-quality resampling method for final production assets.
• Inspect thin lines, text, eyes, hair, and high-contrast edges after resizing.
• Do not assume an AI upscaler reproduces facts; generated detail can be plausible but incorrect.

Make dimensions work on the web

For responsive pages, generate a small set of useful widths rather than scaling one huge download with CSS. Supply intrinsic dimensions, srcset, and an accurate sizes value so layout and source selection agree. CSS object-fit controls presentation inside a box; it does not reduce the bytes already downloaded.

• Match generated widths to the component’s real rendered sizes.
• Use object-fit: cover only when cropping is acceptable.
• Use object-fit: contain when the complete image must remain visible.
• Test at breakpoint boundaries and with unusually tall or wide sources.