To resize an image without stretching it, keep the width-to-height ratio unchanged. Change one dimension and calculate the other, or use a resizer with an aspect-ratio lock. If a rectangular photo must fit a square, resizing alone cannot preserve the whole image and fill the square at the same time: you need cropping or padding.
This walkthrough uses the Image Resizer to turn a 2400 by 1600 pixel image into a 900 by 600 pixel version. The tool processes the selected image in your browser.
Start with the destination, not a random preset
Find out what the image is for. A wide article illustration, a square product thumbnail and a narrow sidebar portrait have different requirements. Write down the intended width, height and whether the entire original must remain visible.
For a website, the image file’s pixel dimensions and its displayed CSS dimensions are different things. A page might display an image at 450 CSS pixels wide while offering a larger resource for a denser screen. web.dev’s responsive-images guide explains why viewport size and display density can require different image resources. There is no single export width that is ideal for every page.
For the worked example, assume the destination requires a 900-pixel-wide landscape file. That is an example requirement, not a universal recommendation.
Calculate the matching height
The original image is 2400 pixels wide and 1600 pixels high. Its aspect ratio is 3:2. Use this calculation:
new height = original height × new width ÷ original width
new height = 1600 × 900 ÷ 2400
new height = 600 pixelsA 900 by 600 export keeps that ratio. A 900 by 900 export does not: it compresses the width more than the height, changing the appearance of faces, circles and other shapes.
You can also scale both dimensions by the same percentage. At 50%, the example becomes 1200 by 800. Pixel counts must be whole numbers, so other percentages may require rounding.
Resize with the aspect-ratio lock enabled
- Open the Image Resizer and choose an image. The file picker displays a 20 MB limit. Keep the original file as your master copy.
- Choose Pixel dimensions under Resize by.
- Leave Maintain aspect ratio selected.
- Set Width (px) to 900. For a 2400 by 1600 source, Height (px) should update to 600.
- Choose an output format and select Resize image.
- Check the preview and the reported new dimensions, then select Download result.
In a check with a synthetic 2400 by 1600 PNG, this procedure produced the expected 900 by 600 output. The tool also displayed the original and exported file sizes. A photo may produce a very different byte-size change, so use your own result rather than treating a test image’s saving as a promise.
The width presets are shortcuts for filling in dimensions. After selecting one, you still need to press Resize image to create a new result.
If you need a square, choose crop or padding
Crop when the edges can be removed
For a 2400 by 1600 landscape image, a centered square crop could retain a 1600 by 1600 area. That removes 800 pixels across the width, or 400 from each side. Check that the subject survives the crop; centering is not always the right composition.
Pad when the whole image must remain visible
For a 900 by 900 square, first resize the example to 900 by 600. Place it on a square canvas with 150 pixels of padding above and below. This keeps the full image but introduces empty space.
The current Image Resizer does not provide a crop selection or a padded-canvas control. Prepare the crop or canvas in an image editor, then use the resizer for the final dimensions. Turning off the ratio lock is not a substitute for either operation.
Choose the export format and inspect the result
The tool offers JPEG, PNG and WebP. Its quality control appears for JPEG and WebP and is hidden for PNG. JPEG export fills transparent areas with white in this tool, so check logos and cutouts carefully. Select PNG if you need to preserve transparency in this workflow.
The export uses browser canvas encoding. MDN’s toBlob documentation describes format support, fallback behavior and the quality argument. Browser support matters; check the downloaded format as well as the choice you made in the form.
- Open the downloaded file and confirm its actual dimensions.
- Inspect text, diagonals and small details at the intended display size.
- Check orientation and transparent edges.
- Confirm the file also meets any upload-size limit.
A smaller pixel count does not guarantee a particular file size. If the dimensions are right but the file is still too large, continue with our website image-compression workflow. Resizing and compression solve related but different problems.
Keep the original for future exports. Downscaling removes image detail, and saving the smaller result as PNG does not undo that loss. Enlarging it again increases the pixel dimensions; it does not recover the original detail.