How to Resize an Image Without Distorting It
Why images stretch, how proportional scaling works, and what to do when the target shape does not match the source.
Distortion happens for exactly one reason: width and height were changed by different amounts. Everything else about resizing is a matter of quality, not shape.
Keep the ratio locked
If you scale width by 0.5, scale height by 0.5 as well. Any tool with a chain or lock icon does this for you: type one dimension and the other follows. Percentage scaling is inherently safe for the same reason, since both dimensions receive the same factor.
When the target shape is different
Sometimes you need a square from a landscape photo. Resizing cannot do this without distortion, so you have three honest options: crop to the target shape and then resize, add padding bars in a background colour, or change the layout to accept the original ratio.
Cropping is almost always the right answer for photographs. Padding is reasonable for logos and product cutouts, where the subject must stay whole.
Downscaling and upscaling
Downscaling averages neighbouring pixels together and generally looks excellent. Very large reductions in a single step can lose fine detail, so if you are going from 6000 pixels to 300, a two-step reduction sometimes reads sharper.
Upscaling has to invent pixels that were never captured. Standard interpolation produces a softer, slightly blurry result. It is acceptable for a modest 10 to 20 percent increase and disappointing beyond that.
A quick checklist
- Lock the aspect ratio before typing any number.
- Resize down from the largest original you have, not from a small copy.
- Crop rather than stretch when shapes do not match.
- Check the result at 100 percent zoom before publishing.
Try the tools
Everything described in this article can be done here in your browser, free of charge and without uploading files to a server.
Keep reading
- Image Resolution vs Image Dimensions: What's the Difference?Why a 300 DPI tag means nothing on the web, and how pixel dimensions actually determine sharpness on screen and in print.
- How Large Images Affect Website PerformanceThe measurable cost of oversized images, from Largest Contentful Paint to mobile data use, and the fixes that move the needle.
- PNG vs WebP: Which Format Is Better?A direct comparison for graphics, screenshots and transparent images, including where PNG remains the safer choice.