How to resize an image without distortion

Calculate proportional dimensions and distinguish changing size from cropping the frame.

Practical guideUpdated Approx. reading time: 3 min
On this page

Preserve the width-to-height relationship

A 1600 × 900 image has a 16:9 ratio. Reducing its width to 800 while preserving proportions gives a height of 450.

Forcing 800 × 800 without preserving the ratio stretches it. To fill a square without distortion, crop the frame before or after resizing.

Reducing or enlarging

Reducing dimensions decreases the pixel count. Enlarging interpolates existing pixels; it cannot recreate details absent from the original.

Pixel dimensions and byte size are different measurements. Format, quality and image contents also affect file size.

  1. Load a supported image and check its dimensions.
  2. Enable aspect-ratio preservation to avoid distortion.
  3. Enter the target width or height.
  4. Download and compare sharpness, shape and dimensions.

Before publishing or printing

For a website, use dimensions appropriate to the actual display space. For printing, check physical size and the resolution required by the printing process.

Keep the original and check transparent edges, colors and metadata: browser re-export may alter them. Resizing happens locally.

Criteria for reviewing and delivering the result

Start with source dimensions and the actual space where the resource will appear. If their proportions match, reduce while preserving shape. If ratios differ, choose between cropping content and leaving margins. Do not force independent dimensions merely to fill space without checking distortion. A circle, face or logo quickly reveals stretching that might go unnoticed in a texture. The intended composition should guide the method before numeric sizes are entered.

For a square destination, crop a square region preserving the subject, then adjust pixel quantity. Inspect lettering and edges at final size. Enlargement produces no new information, so a large resource needs an adequate source. Keep the highest resolution version and record variant measurements. If a platform applies its own crop on upload, inspect that result as well to ensure it retains the content you preserved. Review byte size separately from pixel dimensions and compress only when required. Preparation is complete when both the download and actual placement preserve appropriate shape, context and readability. Testing the implemented resource catches destination fitting behaviour that may be invisible in a standalone local preview.

TRY IT YOURSELF

Reduce width to one quarter

Load the 400 × 200 px image. Keep aspect ratio enabled and change the width to 100 px; the height adjusts automatically.

The result measures 100 × 50 px. Both dimensions are divided by four, so the width/height ratio remains 2.

Choosing 100 × 100 with aspect ratio disabled distorts contents. For an undistorted square, crop a region before resizing.

View tool screenshot
Resize image example using sample data
Kitavio screenshot in Chrome using the described example. Downloadable files contain fictitious data.