About this image resizer
This tool reads your image file, draws it onto an HTML canvas at the size you choose, and re-encodes it as JPEG, PNG or WebP at the quality you set. All of this happens inside your browser using the canvas API — the original file is never sent to a server.
Locking the aspect ratio keeps width and height proportional as you edit one of them, preventing stretched or squashed results. Quality only affects JPEG and WebP output; PNG is always lossless, so the quality slider has no effect on PNG file size.
How does resizing an image in the browser work?
This tool draws your image onto an HTML5 canvas element at a target width and height, then reads the canvas back out as a new encoded image file using canvas.toDataURL(). Example: a 3000x2000px photo set to 50% scale is redrawn at 1500x1000px, then re-encoded as JPEG at your chosen quality, all without leaving your browser.
Steps to resize and compress an image
- Drag an image onto the drop zone, or click it to choose a file from your device.
- Choose pixel mode to set an exact width and height, or percent mode to scale relative to the original size.
- Keep the aspect ratio lock on to avoid stretching, or turn it off to set width and height independently.
- Pick an output format (JPEG, PNG or WebP) and, for JPEG/WebP, adjust the quality slider to trade off file size against visual quality.
- Press resize to generate the new image, preview it, and download it directly from your browser.
How pixel and percent scaling relate
New width (px) = Original width x (Scale % / 100) · New height (px) = Original height x (Scale % / 100)
- Aspect ratio = original width / original height, kept constant when the lock is enabled
- Quality (JPEG/WebP) = a 0 to 100 setting that trades file size for visual fidelity; PNG ignores this since it is always lossless
Example resize results
| Original size | Setting | Result |
|---|
| 3000 x 2000 px | 50% | 1500 x 1000 px |
| 1920 x 1080 px | Width 800 px (locked) | 800 x 450 px |
| 4000 x 3000 px | 25% | 1000 x 750 px |
| 1200 x 1200 px | Width 300 px (locked) | 300 x 300 px |
Frequently asked questions
Is my image really never uploaded anywhere?
Correct. The entire resize and compression process runs using your browser's built-in canvas API — the file is read locally, drawn to an in-memory canvas, and re-encoded, all without any network request. You can verify this by disconnecting from the internet after the page loads; the tool still works.
Why does PNG stay large even at a low quality setting?
The quality slider only applies to JPEG and WebP, which use lossy compression that trades detail for smaller file size. PNG uses lossless compression, meaning every pixel is preserved exactly, so its file size depends on image complexity rather than a quality setting.
Why does my resized image look blurry or pixelated?
Enlarging an image beyond its original resolution requires the browser to invent new pixel data through interpolation, which softens fine detail; shrinking an image is generally safe, but enlarging significantly beyond 100% often reduces visual sharpness.
What's the difference between resizing by pixels and by percent?
Pixel mode lets you target an exact output size, such as a specific size required for a form or website, while percent mode scales proportionally to the original, useful when you just want a smaller or larger version without calculating exact numbers.
Very large source images may be slow to process or hit browser memory limits depending on your device; WebP output quality and compatibility can vary slightly between browsers, and extremely high scale-up percentages will not add real detail beyond what the original image contained.