Image Resizer

What is an image resizer?

An image resizer changes an image's pixel dimensions, for example turning a 4000 × 3000 phone photo into a 1200 × 900 version for a website. This one lets you set the width, the height, or both in pixels. Set only one and the other is worked out from the original proportions. The result downloads as a PNG.

Resizing is different from compressing. Resizing changes how many pixels the image has; compressing changes how those pixels are stored. Fewer pixels almost always means a smaller file, which is why resizing a large photo is usually the first thing to do before putting it online.

How to resize an image

1. Click Choose File and pick an image (JPG, PNG, WebP, GIF or any other format your browser can show).
2. Type a target Width (px), a Height (px), or both.
3. Click Convert and check the preview.
4. Click Download to save resized.png.

If both boxes are empty, you'll see "Enter a target width, height, or both."

Keeping the aspect ratio

When you fill in just one side, the tool divides by the original aspect ratio (width ÷ height) and rounds to the nearest whole pixel:

In the second row, 500 × (1920 ÷ 1080) is 888.9, which rounds to 889. In the last row both values are used exactly, so a 16:9 image is squashed into a square. To get a square without distortion, crop the image to 1:1 in an editor first, then resize.

Allowed sizes

Each box takes a whole number of pixels from 1 to 10,000. A trailing px is fine, so 800px works, and leading or trailing spaces are ignored. Anything else shows an error instead of a broken image:

The limit exists because browsers cap how large a canvas can be, and past that cap the export silently produces an empty image. MDN lists the limits: desktop browsers allow up to 32,767 pixels per side, but the total pixel count is capped too, and mobile Safari's cap is far lower. 10,000 px per side covers any realistic web or print size. The last row shows that the calculated side is checked as well, so if one side would go over the limit, set both boxes or choose a smaller size.

Upscaling vs downscaling

You can enlarge an image as well as shrink it, but enlarging can't add detail that isn't there. A 400 × 300 image stretched to 1600 × 1200 just spreads the same information over more pixels, so it looks soft. For best results, always resize down from the largest original you have.

The scaling is done by the browser's canvas drawImage() with its default smoothing settings. The default imageSmoothingQuality is "low", so a very large reduction in one step (say, from 6000 pixels wide to 300) can look a little less crisp than it would in a dedicated photo editor. For ordinary web sizes the difference is small.

Why the output is PNG

The tool exports PNG so that nothing is lost on save and transparency in a PNG, WebP or GIF source survives the resize. The trade-off is file size: PNG is lossless, so a resized photograph is usually much bigger as PNG than as JPEG. The PNG specification describes the format; it compresses flat graphics well and photographic detail poorly.

For photos, a good sequence is:

1. Resize here to the dimensions you need.
2. Run resized.png through the image compressor to turn it into a JPEG at a quality you choose, or through the WebP converter for a WebP.

Things that change, besides size

• Metadata is dropped. EXIF, GPS and other embedded data aren't copied, because the canvas only holds pixels. If that's all you want, the EXIF remover does it without resizing.
• Animations become a still image. Only one frame of an animated GIF or WebP is kept.
• Color profiles aren't carried over into the PNG.

Common target sizes

These are widespread conventions rather than fixed rules, so check the platform's current guidance. To mock up a layout before you have the final image, the placeholder image generator makes a labeled image at any of these sizes.