How the compression works

Each image is drawn into an HTML <canvas> at the requested dimensions, then exported via canvas.toBlob() with the format and quality you choose. The browser's native image codec does the actual encoding — Chrome, Edge, and Firefox all use libjpeg-turbo for JPEG, libwebp for WebP. Quality around 75–85 is the sweet spot for photos.

Format guide

JPEG — lossy, photo-friendly, no transparency. Quality 80 typically loses 50–70% of file size with no visible difference. Don't use for screenshots, line art, or text.
WebP — modern lossy/lossless format. Typically 25–35% smaller than JPEG at equivalent visual quality. Universally supported (Chrome 32+, Firefox 65+, Safari 14+, all of 2026's browsers).
PNG — lossless, supports transparency. Quality slider doesn't apply (PNG ignores it). Best for screenshots, icons, anything with crisp edges or alpha.

Quality settings — what to pick

90+ — visually identical to original. Use when you need maximum quality (hero images, brand photos).
75–85 — sweet spot. Compression is significant; visual loss is imperceptible to most viewers. Default 80 lands here.
60–75 — visibly compressed but acceptable for thumbnails, blog inline images, and bandwidth-constrained contexts.
Below 60 — visible artifacts. Only for very low bandwidth or extreme size constraints.

Resize tip

Setting "Max width" to a value smaller than your image's natural width is the single biggest size win. A 4000×3000 photo at 4MB recompresses to ~800KB at quality 80, but resizing to 1600 wide first drops it to ~150KB. Resize to your actual display size, then compress.

Privacy

Images are processed entirely in your browser via Canvas API. No upload happens — open DevTools → Network and drop a file: zero requests. You can disconnect from the internet after the page loads and the tool keeps working. Source is on GitHub for inspection.

Frequently asked questions

Why is the compressed file sometimes larger than the original?

If the source is already aggressively compressed (already low quality, or already WebP), recompressing at higher quality grows the file. Match the output quality to the source — start lower than the original. Re-encoding always loses some data; doing it repeatedly degrades quality.

Does it support HEIC / AVIF?

HEIC: only Safari can decode it natively (iOS / macOS). AVIF decoding is universal in 2026 but encoding via Canvas isn't standard yet. Both are on the roadmap.

What about EXIF metadata?

EXIF (camera info, GPS coords, timestamps) is stripped by Canvas re-encoding. This is usually a privacy win — your photo's GPS location won't be embedded in the compressed file. If you need EXIF preserved, this isn't the right tool — use a CLI like exiftool.

What's the max file size?

25MB per file. Beyond that, browser memory pressure makes the UI sluggish.

Can I batch-process a folder?

Yes — select multiple files in the upload dialog. Each compresses sequentially.

Related tools

Color Picker — Pick colors, convert hex/RGB/HSL/OKLCH, and check WCAG contrast.
QR Code Generator — Generate QR codes for URLs, text, Wi-Fi, contact cards. Custom size, colors, error correction. Download as PNG or SVG. 100% client-side.
Aspect Ratio Calculator — Calculate aspect ratios (16:9, 4:3, 21:9, etc.). Given W:H and one dimension, get the other. Responsive padding-top % for CSS aspect-ratio containers.
Favicon Generator — Generate favicon package from any image or emoji. Multiple sizes (16, 32, 48, 180, 192, 512), manifest.json, and HTML snippet.

Pillar

Part of Frontend & Design.

Written by Mian Ali Khalid. Last updated 2026-05-13.

Image Compressor