How to Resize Images Without Stretching Them

Stretching is a setting problem, not a mystery

An image looks stretched when width and height change by different proportions. Faces turn oval, logos warp, and product shots look amateur. Preventing that means preserving aspect ratio: the relationship between width and height stays constant while you scale.

Aspect ratio in one sentence

If a photo is 4000×3000, its ratio is 4:3. A correct resize to 800 px wide must be 600 px tall. Any other height at 800 px wide will distort.

Lock ratio by default

Good resizers default to “lock aspect ratio.” Enter one side; the other updates automatically. The Image Resizer on Filewillow follows that pattern for everyday JPEG and PNG work in the browser.

Only unlock when you intentionally need a different frame, and even then, prefer cropping over stretching.

Choose which dimension to drive

Match the constraint that actually matters:

• Width-driven: blog content columns, most article heroes, thumbnails in a fixed-width card.
• Height-driven: tall mobile slots, some banner systems that cap height.
• Longest-edge-driven: photo libraries that say “max 2000 px on the long side.”

If a CMS demands exact 1200×630 social images, do not squash a 4:3 photo into that box. Crop to 1.91:1 (or whatever the slot requires), then scale.

Upscaling vs. downscaling

• Downscaling (smaller than the original) is the common web case. You discard detail but can keep a clean result.
• Upscaling enlarges pixels. Softness and artifacts increase. No consumer resizer “finds” real detail that was never captured.

If you need a larger display size, start from a higher-resolution original when possible.

Export settings that interact with resize

Resizing and compression are separate levers:

1. Pick target dimensions with ratio locked.
2. Then set JPEG quality if you need a smaller file.
3. Preview before publishing.

Aggressive quality reduction can look worse than a slightly larger file at sensible dimensions. For graphics with hard edges and text, PNG may survive resizing more cleanly than a low-quality JPEG, see also format choice in related guides.

Checklist for non-stretched results

1. Note original width and height.
2. Confirm the destination’s required size or max size.
3. Decide crop vs. letterbox vs. exact fit before scaling.
4. Scale with aspect ratio locked.
5. Glance at faces, circles, and logos for distortion.
6. Keep the original file; download a derivative.

Common CMS traps

• Theme CSS that forces width: 100%; height: 300px; on images will stretch even a correctly exported file. Fix the CSS or supply an image already cropped to that box.
• Retina displays often need ~2× the CSS pixel dimensions. Provide adequate resolution without uploading a 40 MP original into a 320 CSS-pixel slot.

Limitations to accept

Browser canvas resizing, as used by many local tools, depends on the browser’s resampling. It is excellent for web prep and imperfect compared with specialized print RIP software. Color management can also differ slightly from Photoshop. For social and site images, that is usually fine; for print-critical brand assets, use your design toolchain.

Bottom line

Do not stretch to force a box. Crop or pad to the target aspect ratio, then scale proportionally. A locked-ratio Image Resizer makes the math hard to get wrong, your layout CSS still has to cooperate.

Related reading

Once dimensions are correct, use how to reduce image file size for the web and choose a format with JPEG vs PNG vs WebP.