Image Resizer
Resize, crop, rotate and re-encode an image to exact pixel dimensions, entirely inside your browser.
Drop an image here
JPEG, PNG, WebP or GIF.
Preview
How the resize actually happens
The file is decoded into an image bitmap, then drawn onto a canvas whose dimensions you control.
Everything you see in the controls is a canvas operation: drawImage with a source
rectangle performs the crop, the destination rectangle performs the scale, and a rotation and a
negative scale handle the flip. When you press download, the canvas is re-encoded with
toBlob() using the format and quality you picked. The original file on disk is
never touched.
The offset and zoom controls only do something in cover mode, because that is the only mode where part of the image is deliberately discarded. In contain mode nothing is cropped — the whole image is scaled to fit and the leftover space is filled with the background colour, which matters when you export a transparent PNG as a JPEG. Stretch is the crude option: it maps the source onto the target box exactly, which is what you want for a deliberate distortion and what you should avoid for a photograph.
Choosing dimensions that respect the image
Scaling down by a large factor in one step gives a slightly worse result than doing it in
stages, because a single big reduction has to average a lot of pixels at once. In practice the
difference is small for factors below about three, and browsers now use good resampling
(imageSmoothingQuality = "high"), so a single step is usually fine. What matters far
more is choosing the right target: the largest size at which the image will ever be displayed.
Scaling up is the case to be careful about. Interpolation invents pixels; it cannot recover detail that was never captured. A 400 px photograph enlarged to 1600 px will be soft at 100 % zoom no matter which tool does it, so if the image is destined for print, go back to the original capture rather than enlarging a small copy.
A practical order of operations
- Enter the final width you need, with the aspect ratio locked so the height follows automatically.
- Switch to cover mode if the exact frame matters (a profile picture, a card, a banner) and use offset and zoom to choose the crop.
- Set rotation and flips if the camera orientation was wrong.
- Pick the format: PNG for screenshots, logos and transparency; JPEG or WebP for photographs.
- Check the estimated size, then download and inspect the result at 100 % zoom before using it.
Exporting a transparent image as JPEG has no alpha channel to store transparency in, so the transparent areas are filled with the background colour you chose. If you need the transparency, keep PNG or WebP.
Frequently asked questions
Does this upload my image anywhere?
No. The file is decoded by your browser, drawn onto a canvas with the transforms you choose, and exported locally. Cutting your network connection after the page loads changes nothing about how the tool behaves — which is the simplest proof that no upload is happening.
Can I enlarge an image back to its original size?
You can, but the detail will not come back. Resizing down discards pixels permanently; enlarging afterwards interpolates new pixels that were invented by the browser, which produces a soft or blocky result. Always keep the original file and resize a copy.
What is the difference between contain and cover?
Contain scales the image so that all of it fits inside the target box, adding background bars where the aspect ratios differ. Cover scales it so that the whole box is filled, cropping whatever overflows — which is why cover mode gives you offset and zoom controls to choose which part survives.
Why is my exported PNG bigger than the JPEG version?
PNG is lossless, so it stores every pixel exactly and cannot be told to drop detail. That is the right choice for screenshots, logos and anything with flat colour or transparency, but it is a poor choice for photographs, which is where JPEG or WebP win by a large margin.
Sources & further reading
- MDN — CanvasRenderingContext2D.drawImage() — the call used for every scale, crop and rotation here
- MDN — createImageBitmap() — how the file is decoded before it is drawn
- web.dev — Optimize images — why serving an image at its displayed size matters more than compression