Image Compressor

What is this for?

This tool re-encodes PNG, JPG, or WebP images at a lower quality to reduce file size. It uses your browser's native Canvas API—the image is decoded, drawn onto a canvas, and re-encoded at the quality level you choose. Everything happens locally; no upload, no server processing, no tracking. Use it when you need to fit images under size limits, reduce page weight, or prepare images for platforms that degrade them anyway.

When to use it

• An email provider enforces an attachment limit (typically 20–25 MB) and your image exceeds it.
• A CMS, form, or API gateway rejects uploads over a specified threshold.
• You're optimising images for a website and want to reduce LCP impact without re-shooting or re-exporting from source.
• A messaging app will re-compress your image anyway—pre-compress at your chosen quality to avoid stacked losses.
• You're distributing high-resolution images to users with bandwidth constraints.
• You need a quick quality/size trade-off without leaving the browser or installing software.

How it works

• Drop or select a PNG, JPG, or WebP file. The tool reads it as a blob in your browser.
• Adjust the quality slider (0–100). For JPG and WebP, lower values reduce file size; PNG ignores this setting entirely because it's lossless.
• The tool draws your image onto an HTML5 canvas and calls canvas.toBlob() with your chosen quality, re-encoding to the original format.
• The compressed blob is displayed with before/after file sizes so you can judge the trade-off.
• Click Download to save the smaller file. The original remains untouched on your device.

Common gotchas

• PNG quality slider has no effect. PNG is lossless; it compresses only by algorithm, not quality reduction. To shrink a PNG significantly, export it as JPG instead—photographic content typically shrinks 5–10×, though you lose losslessness.
• Re-compressing JPGs stacks losses. If you compress an already-compressed JPG, you lose more quality per step. Always compress from the original or highest-quality source available.
• Quality below 0.5 shows artefacts. JPEG degradation becomes visible on solid colours (skin tones, skies, backgrounds). A quality of 0.75–0.85 is usually imperceptible and offers good size savings; test on your specific image.
• WebP is smaller but less widely supported. At equal quality, WebP beats JPG on file size, but older email clients, browsers, and messaging apps may not render it. Use JPG if your audience is unknown or mixed.
• Large images may hang briefly. Very large or numerous re-encodes can block the UI thread for a few seconds while Canvas processes. This is normal and temporary.

Format guidance

• JPG: Best for photographs, complex imagery, and broad compatibility. Quality 0.75–0.85 balances size and appearance.
• PNG: Lossless; only shrink by converting to JPG. Use for graphics, logos, and screenshots where transparency or sharpness is critical.
• WebP: Modern, efficient format; 20–30% smaller than JPG at the same visual quality. Use for web if you control the recipient platform.