Resizing is about pixel count: resampling a 4032 × 3024 photo down to 1200 × 900 leaves roughly a tenth of the data for every later byte, decode and repaint to deal with. The work is done by drawing the picture into a <canvas> and reading it back out, entirely inside your browser.
How to use it
- Drop an image onto the dashed panel or click to browse. Anything with a MIME type beginning
image/is accepted here, not just JPEG and PNG. - Once it loads, a line reading "Original dimensions: W × H px" appears and both fields are pre-filled with those numbers. That pair is the baseline every ratio is computed from, so it is worth reading before you type.
- Enter your target in "Width (px)" or "Height (px)". The padlock icon between the two fields starts locked, so editing one field recomputes the other from the original aspect ratio.
- To stretch the picture deliberately, click the padlock to unlock it — the icon opens — and the two fields become independent. Click it again to go back to proportional editing.
- Press Resize. There is no progress indicator; the result simply appears below with a Download button beside it, saved as
originalname_WIDTHxHEIGHT.ext.
When it comes in handy
Bringing camera originals down to a site's accepted width
Publishing systems and forums frequently specify a maximum width of 1920 px, while a current phone starts at around 4000. Typing 1920 into the width field, letting the height follow, and uploading that is safer than handing over the original and trusting the server: you get to look at the result first, and you are not guessing at somebody else's resampling.
Producing thumbnails that all match
Nothing spoils a product grid like thumbnails of differing heights making the row jump as you scroll. Pick a shared width — 600 px, say — fill in only that field for every image, and let the height compute itself; then pair a fixed-ratio container with object-fit: cover in the layout so the grid stays even without anything being squashed.
Checking an @3x export back at @1x
Design handoffs often arrive only at the highest density, and the fastest way to know whether an icon still reads at its real display size is to look at it there. Hairlines that vanish, padding that collapses and labels that stop being legible all show up immediately, rather than after the asset is already in a build.
Hitting an exact social card size
Open Graph images are usually specified precisely, 1200 × 630 being the common one. Remember that this tool scales and never crops: unlocking the ratio and forcing those numbers will flatten every face in the shot. Crop to 40:21 in something that can crop, then come back here to land on the exact pixel values.
Limits and behavior
- While the ratio is locked, the other field is always derived from the original dimensions rather than from whatever you typed a moment ago. That means a session of unlocked experimenting can always be rescued: lock it again, touch one field, and the proportions snap back to the source image.
- The computed side is rounded to a whole number, so it can sit a pixel away from your own arithmetic — 1920 × 1080 scaled to 800 wide gives exactly 450, but a less tidy source ratio may produce 449. Pixels cannot be fractional and something has to absorb the remainder.
- Export goes through
canvas.toDataURL(<the source MIME type>)with no quality argument, which means JPEG is re-encoded at the browser default — 0.92 in most of them. A resize therefore also recompresses the picture once, and that is why the file size after scaling does not track the pixel reduction exactly. - PNG is written losslessly and transparency survives intact. Do note the reverse case: enlarging a small PNG and saving it can produce a file several times heavier than the source, simply because there are now many more pixels to store.
- Browsers can only encode a handful of formats. Feed in a GIF or an SVG and everything on screen looks fine, but the bytes you save are PNG while the filename keeps the original
.gifor.svgsuffix, because the download name is assembled by splitting the source name apart and joining it back together. - The fields enforce a minimum of 1 and no maximum. Tens of thousands of pixels will exceed the browser's canvas area limit and yield a blank image or nothing at all, while an empty field or a zero makes the button do literally nothing. Neither case produces an error message.
- Scaling happens in a single step, with no staged downsampling. Going from 4000 px straight to 200 px can alias fine lines and small type into jaggedness or make them disappear; when the output really matters, stepping down in two or three passes — 1000, then 400, then 200 — is visibly cleaner.
- The output carries no EXIF, so shooting data and GPS coordinates do not travel with it. It also means the camera's orientation tag is gone: whatever direction you see in the preview is baked into the pixels.
- There is no cropping, rotation, percentage scaling or watermarking here, and no batch mode — one image at a time, refused above 10 MB.
Frequently asked questions
Does the image get sent to a server?
It is not. The file is attached to an <img> via URL.createObjectURL and redrawn through a <canvas>, all on your own device, and no request carries the picture out of the browser. (The page around the tool does load third-party resources such as advertising, which have nothing to do with the file you picked.)
Can I just scale by a percentage, say 50%?
The fields take pixels only, but the original dimensions are printed right there, so the arithmetic is one step: half of 3000 × 2000 is 1500, and typing that into width fills 1000 into height for you. With the ratio locked you only ever have to work out one side.
Will enlarging make a picture sharper?
No. Enlargement interpolates the pixels you already have into a larger grid; no information is added and edges go soft. When you genuinely need more resolution, go back to the original capture, or to a vector source such as AI or SVG for icons and illustrations. Neural upscaling is a different technology and is not what happens here.
Why does my resized JPEG look slightly soft, and why is it not as small as I expected?
Because saving involves a re-encode and the tool exposes no quality control, so it takes whatever the browser defaults to. If the real goal is a smaller file, do it in two steps: land the pixel dimensions here, then run the download through the image compressor where a slider actually governs the encoder. Two deliberate steps give you far more control than one blind one.
I pressed Resize and nothing happened.
Most often one of the fields is empty or zero — the code returns immediately on an invalid number without saying so. The other possibility is that the browser could not decode the file at all, a camera HEIC being the usual culprit; in that case even the original-dimensions line never appears, since those numbers are filled in only after the image loads successfully.
Can I resize the result again straight away?
The preview does not become the new source; both fields still refer to the image you first dropped in. To continue, download it and drop the downloaded file back in — though every redraw costs a little detail, so working out the final dimensions once beats arriving there in two hops.