Image Resizer & Compressor — Resize in Your Browser
Drop a photo to resize it and compress JPEG or WebP with a quality slider. Width and height stay in sync when aspect ratio is locked. Before and after file sizes update as you encode on an off-screen canvas. Nothing leaves your device.
What is canvas image compression?
Browsers can draw a bitmap onto a canvas and encode it with canvas.toBlob. JPEG and WebP accept a quality argument (0–1). PNG stays lossless. This tool never sends the file to a server; object URLs use blob: which the site CSP already allows. See: HTMLCanvasElement.toBlob.
Why Use This Tool
- Shrink photos for the web — Drop a large JPEG, set a max width, and download a smaller file.
- Compress for email or chat — Lower JPEG/WebP quality until the after size fits an attachment limit.
- Convert format — Turn a PNG screenshot into JPEG or WebP without an upload.
- Prepare a data URL — Resize first so the Base64 string stays small. Image to Base64 →
- Preview a Base64 image — Decode a data URL, then come back here to resize it. Base64 to Image →
Tips
- Lock aspect ratio unless you intentionally want to stretch the image.
- JPEG has no alpha — transparent PNGs get a white background.
- WebP often beats JPEG at the same quality, but not every browser encodes it.
- Resize before converting to Base64; Base64 adds about 33% size.
How to Use the Image Resizer
Drop or choose an image
PNG, JPEG, WebP, or GIF up to 10 MB. SVG is not rasterized here.
Set width and height
Lock aspect ratio (default) so one side follows the other. Max 8192 px.
Pick format and quality
JPEG and WebP use the quality slider. PNG is lossless and ignores quality.
Compare sizes and download
Before/after file size and a percent smaller (or larger) label. Download stays local.
Worked Examples
Halve a 200×100 photo
Width 100, aspect locked
100×50, JPEG or WebP usually smaller than the original PNG
Heavy JPEG compression
Same pixels, quality 40%
After size drops; artifacts increase
PNG screenshot to JPEG
PNG with a white-filled JPEG encode
Transparent pixels become white; file often shrinks
Common Errors & How to Fix Them
| Error Message | Cause | Fix |
|---|---|---|
Use PNG, JPEG, WebP, or GIF | SVG or another type was dropped | Export a raster image, or edit vectors in the SVG Editor. |
Image must be 10 MB or smaller | The file exceeds the client-side cap | Trim the original in another app, then drop it again. |
Could not encode as WebP | The browser has no canvas WebP encoder | Switch to JPEG or PNG. |
Output formats
| Feature | Quality slider | Transparency |
|---|---|---|
| JPEG | Yes (lossy) | No — filled white |
| WebP | Yes (lossy) | Yes |
| PNG | No (lossless) | Yes |
| GIF | Input only | First frame only |
Frequently Asked Questions
Does this image resizer upload my photo?
No. FileReader and canvas.toBlob run in your browser. The image never leaves the page.
How does the quality slider work?
For JPEG and WebP it maps 10–100 to canvas quality 0.1–1.0. PNG is lossless, so the slider is disabled.
Why is the after size sometimes larger?
Encoding a small PNG as a high-quality JPEG, or enlarging pixels, can grow the file. Lower quality or dimensions until After is smaller.
Are GIF animations preserved?
No. Canvas draws the first frame only. Export a still, or keep the original GIF.
Is blob: allowed by the content security policy?
Yes. This site already allows blob: and data: in img-src, so object-URL previews work without changing production CSP.