How to resize images without distorting them

Preserve the aspect ratio to prevent stretching

Aspect ratio is the relationship between width and height. A 2400 by 1600 pixel photograph has a 3:2 ratio; reducing it to 1200 by 800 keeps that relationship and every object retains its proportions. Changing it to 1200 by 900 forces the same content into 4:3, making shapes appear wider or taller unless part of the image is cropped.

A ratio lock calculates the missing dimension when you edit width or height. The exact result may be fractional and must be rounded to a whole pixel, so a one-pixel difference is normal. Entering both dimensions independently should be reserved for sources you know already match the target ratio or for intentional distortion effects.

Separate resizing from cropping

Resizing keeps the complete frame and changes its dimensions. Cropping removes part of the frame to create a different composition or ratio. If a landscape image must fill a square card, preserving the whole frame will leave empty space; stretching it will distort the subject; cropping it will remove content. Those are distinct outcomes, and the right one depends on the design.

Choose a crop around the important subject before the final resize, ideally from the full-resolution master. Check faces, text and logos near the edges at narrow mobile layouts. Automated centre crops can cut away an off-centre subject, so use focal-point controls where the publishing system supports them.

• Never describe a crop as a lossless resize.
• Keep safe space around text and important objects.
• Preview each destination ratio rather than assuming one crop fits all.
• Retain the uncropped master for future formats.

Downscaling and enlargement have different limits

Downscaling combines source pixels into fewer output pixels. A good resampling algorithm can retain edges and detail, but very fine patterns may soften or alias. Slight sharpening after reduction can help some photographs, while interface screenshots and pixel art may require specialised methods to keep intentional edges.

Enlargement asks the software to invent additional pixels between known ones. Modern interpolation can smooth the result, but it cannot recover text, focus or texture that the source never captured. A small image enlarged several times may look acceptable as a soft background yet fail for a product detail or printed poster. Find a larger source whenever the final use needs real detail.

Choose dimensions from the destination

Start with the largest size at which the asset will actually render, not a generic recommendation copied from another layout. A content image in a 960-pixel column does not need a 5000-pixel output for ordinary displays. High-density screens can benefit from a larger source, often around twice the CSS width, but the browser should still receive responsive sizes rather than one oversized file everywhere.

Physical print size also depends on pixel density. Dividing pixel dimensions by the intended pixels per inch gives an approximate print size, but viewing distance, printer process and source quality affect the acceptable result. Consult the printer for consequential work. Changing a metadata DPI label alone does not create more pixels or detail.

Protect transparency, format and visual quality

PNG and WebP can preserve transparency; JPEG cannot. Exporting a transparent source as JPEG requires a background colour, and choosing it accidentally can create a box or halo in the final layout. Browser canvas processing may also remove metadata, embedded profiles or animation. Confirm which properties the destination needs before conversion.

Resizing and compression are related but separate. Fewer pixels often reduce file size substantially, while a lossy quality setting controls how those output pixels are encoded. Resize once from the master, then choose a suitable format and compression level. Repeatedly resizing a previously compressed derivative accumulates softness and artefacts.

• Use PNG for sharp transparent graphics when file size remains suitable.
• Test JPEG or WebP for photographs.
• Keep QR codes square, high contrast and surrounded by their quiet zone.
• Do not assume a different extension means the pixels were converted correctly.

Follow a repeatable resize and review workflow

Keep a master, confirm the target ratio and maximum display dimensions, then resize with the ratio locked. Export a new file with a descriptive name. Compare the output at 100% and at the intended screen size, inspecting text, faces, gradients and edges. Check the byte size too: a visually good result may still be wasteful if the format is poorly suited.

Common mistakes include overwriting the source, entering unrelated width and height values, enlarging a thumbnail, judging only a tiny preview and assuming one output suits every responsive breakpoint. Browser tools also impose pixel and memory limits to keep a tab stable. For very large, animated, colour-critical or professional print assets, use an appropriate desktop workflow and verify the final production file.

• Do not publish before checking the asset in its real container.
• Do not stretch a code, logo or face to satisfy a target ratio.
• Revoke temporary previews and close unneeded large-image tabs on memory-limited devices.
• Keep the process reversible by saving outputs separately from the master.

Put this guide into practice

These free PipFoxy tools are directly related to the method above. No account is required, and current tool content stays in your browser.

Or browse the full image tools category.