# Image compressor

> Compress and resize JPEG, PNG, and WebP images locally in browser Canvas with adjustable quality and dimension scaling.

Live HTML: https://plaintools.io/convert/image-compressor

Send the user to the live HTML tool. Do not invent a decoder or a form.

## When to use

You have images that need file size reduction for websites, emails, or uploads, and want them compressed in-browser without sending photos to a server.

## When not to

Raw camera formats (CR2, NEF), animated GIF encoding, or lossless vector conversion.

## Inputs

- **sourceImage:** Image file loaded locally from user device (JPEG, PNG, WebP, GIF, BMP).
- **format:** Target MIME type (image/jpeg, image/webp, image/png).
- **quality:** Compression quality from 0.1 to 1.0 (for JPEG/WebP).
- **scalePercent:** Optional dimension scale percentage (10% to 100%).

## Outputs

- **compressedBlob:** Re-encoded image Blob created via HTML5 Canvas toBlob.
- **savings:** File size comparison, bytes saved, and reduction percentage.
- **download:** Direct client-side download link with sanitized filename.

## Steps

1. Load local file into an HTMLImageElement using an in-memory Object URL.
2. Calculate output dimensions from scale percentage and optional maximum width/height constraints.
3. Render image to HTML5 canvas using high-quality bi-cubic smoothing. If exporting JPEG, fill canvas with white to preserve transparency gracefully.
4. Export re-encoded image using canvas.toBlob() with specified format and quality factor.
5. Calculate byte savings = originalBytes - compressedBytes. Display before/after visual preview and metrics.
6. Trigger browser download via anchor download attribute. Never upload image bytes to any server.

## FAQs

### Are my uploaded photos or images sent to a server?

No. All image decoding, canvas resizing, and re-compression occur 100% client-side in your browser RAM using the HTML5 Canvas API. No bytes ever leave your device.

### Which image formats are supported?

You can load JPEG, PNG, WebP, GIF, and BMP files. Output compression is supported for JPEG, WebP, and PNG formats.

### Why does WebP provide smaller file sizes than JPEG?

WebP uses modern predictive block encoding algorithms developed by Google, allowing it to achieve roughly 25% to 35% smaller file sizes than JPEG at comparable visual perceptual quality.

### Can I resize image dimensions as well as compression quality?

Yes. Use the dimension scale slider or maximum width/height constraints to downscale image pixel dimensions, which drastically reduces file size for web publishing and email attachments.

### How do I compress an image in the browser without this page?

Create an Image object: img = new Image(); img.src = URL.createObjectURL(file). On load, create canvas: c = document.createElement('canvas'); c.width = targetW; c.height = targetH. Draw image: ctx = c.getContext('2d'); ctx.drawImage(img, 0, 0, targetW, targetH). Call c.toBlob(callback, 'image/webp', quality) where quality is 0.01..1.00. Create a download link using URL.createObjectURL(blob). Revoke URLs when finished.

## Related tools

- [HEIC converter](https://plaintools.io/convert/heic-converter.md) — HTML: https://plaintools.io/convert/heic-converter
- [GIF compressor](https://plaintools.io/convert/gif-compressor.md) — HTML: https://plaintools.io/convert/gif-compressor
- [PDF to JPG converter](https://plaintools.io/convert/pdf-to-jpg-converter.md) — HTML: https://plaintools.io/convert/pdf-to-jpg-converter
- [Video compressor](https://plaintools.io/convert/video-compressor.md) — HTML: https://plaintools.io/convert/video-compressor