ToolSite

How to Resize Images Without Distorting Them

Resize images without stretching or squashing. Master aspect ratio, the crop-then-resize workflow, and PPI for print. Free image resizer with live preview.

By ToolSite4 min readguides

The Stretch Problem

You have an image that is 2000x1500 pixels and you need it to be 400x300. If you type "400x300" into a resizer that blindly scales the width to 400 and the height to 300, does the image distort? In this case it does not, because 2000/1500 = 400/300 = 4:3. The aspect ratio is the same.

But if the original is 2000x1500 (4:3) and you need 400x200 (2:1), the image stretches horizontally. People look squashed. Circles become ovals. Text becomes unreadable. This happens because the width and height are being scaled by different factors.

Resizing without distortion means either preserving the aspect ratio (and accepting that one dimension may not hit the target) or cropping to the target ratio first, then scaling.

Understanding Aspect Ratio

Aspect ratio is the relationship between width and height, expressed as W:H. It is a single number once you divide: 2000/1500 = 1.333 = 4:3.

Common ratios and where they appear:

  • 16:9 (1.78): widescreen video, hero images, YouTube thumbnails
  • 4:3 (1.33): older photos, some product images, presentations
  • 1:1 (1.0): square, Instagram posts, product thumbnails, profile pictures
  • 3:2 (1.5): DSLR and mirrorless camera photos
  • 2:1 (2.0): Twitter/X header images
  • 3:1 (3.0): Twitter/X header (newer design), some banners
  • 9:16 (0.56): Instagram stories, TikTok/Reels, portrait video

To calculate the height for a given width while keeping aspect ratio:

Original: 2000x1500 (4:3 ratio)
Target width: 400px
Height = 400 / (4/3) = 400 × 0.75 = 300px

Or, going the other way:

Target height: 300px
Width = 300 × (4/3) = 400px

Method 1: Scale with Locked Aspect Ratio

If you specify only one dimension and lock the aspect ratio, the other dimension calculates automatically:

Original: 2000x1500 (4:3)
Set width: 400, lock ratio
Result:   400x300 (4:3 preserved, no distortion)

This guarantees no distortion. The tradeoff: the calculated dimension may not match your exact target. If your CMS requires exactly 800x600 for a thumbnail and your locked-width resize produces 800x533, you need a different approach.

The Image Resizer locks the aspect ratio by default. You set one dimension, and the other scales proportionally. To change the ratio, you must first crop.

Method 2: Crop to Target Ratio, Then Scale

If you need exactly 400x200 (2:1) from a 2000x1500 (4:3) original:

  1. Crop the original to a 2:1 aspect ratio. For a landscape 2:1 crop from 4:3, trim the top and bottom: 2000x1000.
  2. Scale the cropped image to 400x200. The aspect ratio now matches, so no distortion occurs.

The Image Resizer and Image Cropper work together for this workflow. Crop to the desired ratio first, then resize to the exact pixel dimensions.

Common Dimensions by Platform

Knowing target dimensions upfront avoids guesswork:

| Platform | Dimensions | Ratio | |---|---|---| | Instagram post (square) | 1080x1080 | 1:1 | | Instagram story | 1080x1920 | 9:16 | | YouTube thumbnail | 1280x720 | 16:9 | | Twitter/X header | 1500x500 | 3:1 | | LinkedIn banner | 1584x396 | 4:1 | | Facebook cover | 851x315 | ~2.7:1 | | Shopify product image | 2048x2048 | 1:1 | | Open Graph image | 1200x630 | ~1.91:1 |

Pixels Per Inch (PPI) and Print

For screen display, only pixel dimensions matter. A 400x300 image at 72 PPI and the same image at 300 PPI look identical on a monitor. Screens ignore PPI metadata and display pixels directly.

PPI matters for print. Here is how it works:

  • 300 PPI is standard for high-quality photo prints.
  • An image 3000 pixels wide printed at 300 PPI produces a 10-inch-wide print.
  • To calculate print size: divide pixels by PPI (3000 / 300 = 10 inches).
  • To calculate required pixels for a print: multiply desired inches by PPI (8 inches × 300 PPI = 2400 pixels).

The Image Resizer allows PPI adjustments for print-targeted exports. Set the PPI to 300 for print files. The pixel dimensions determine the file size; the PPI metadata determines how printers interpret the physical size.

Resize vs Resample

These terms are not the same:

  • Resize: changes the display size without changing the pixel count. The file size stays the same. Only the presentation metadata changes. This is like zooming in or out in a viewer.
  • Resample: changes the actual pixel count. Going from 2000x1500 to 400x300 discards 95% of the pixels. The file size drops proportionally. This is what you want for web use.

The Image Resizer resamples by default, producing a new image file with the target pixel dimensions.

Try it yourself: open the Image Resizer. Upload a photo. Set the width to 400 pixels with aspect ratio locked. The height updates automatically. Now disable the lock and set 400x200. The preview shows the distortion: people look squashed, circles become ovals. Re-enable the lock, then open the Image Cropper, crop your image to 2:1 first, and resize the cropped version to 400x200.

Related Reading