How browser-based compression works
This tool decodes each image, draws it onto an HTML <canvas>, and calls canvas.toBlob(type, quality) to produce a new file. For JPG and WebP, the quality argument (here shown as 0–100, passed to the browser as 0–1) controls how much high-frequency detail the encoder throws away. Lower quality means a smaller file and more visible artefacts. Because the pixels are redrawn from scratch, the output carries no EXIF, GPS, orientation tag or embedded colour profile — the encoder starts from a clean bitmap.
PNG is different. It is a lossless format, so toBlob('image/png') re-compresses the exact pixels with DEFLATE and ignores the quality value. A photo stored as PNG will barely shrink. The honest options for a big PNG are to convert it to JPG or WebP, or to reduce its pixel dimensions. Dedicated lossless PNG optimisers such as pngquant, OxiPNG or TinyPNG rewrite the colour palette and per-row filters — work a canvas cannot do — and a browser tool cannot match them for lossless PNG size.
JPG, WebP or PNG — which is smallest
| Format | Best for | Size & notes |
|---|---|---|
| JPG | Photographs, complex scenes, anything without transparency | Small at quality 70–85. Universally supported. No alpha channel. |
| WebP | Photos and graphics for the web, images that need transparency | Roughly 25–35% smaller than JPG at the same visual quality. Keeps alpha. Supported by every current browser. |
| PNG | Screenshots, logos, flat UI, sharp text, hard edges | Lossless. Large for photos. A canvas re-encode gives little or no reduction — switch to WebP for a real win. |
Rule of thumb: if the source is a photo, output WebP for the smallest file or JPG for the widest compatibility. If the source is a screenshot or logo you want to keep crisp, keep it PNG and accept the size, or move to WebP if some loss is acceptable.
Quality versus artefacts
- 90–100 — near-visually-lossless. Use when the image will be printed or edited further. Modest size saving.
- 80–89 — the sweet spot for most web images. Artefacts are invisible at normal viewing size.
- 65–79 — good for large hero images and backgrounds where page speed matters more than pixel-peeping.
- 50–64 — visible softening and blocking around sharp edges and text. Acceptable for thumbnails.
- Below 50 — obvious blocking and colour banding. Only for the tightest upload limits.
Flat colour, gradients and text show artefacts first. Busy photographic detail hides them well, which is why the same quality value looks fine on a landscape and poor on a screenshot.
Resize or compress?
These solve different problems. Compressing lowers quality but keeps the pixel dimensions, so a 4000 px image stays 4000 px. Resizing reduces the pixel count. If an image will be displayed at 800 px wide, sending 4000 px wastes about 25× the data no matter how hard you compress it — resize first, then compress. Use the Limit max width option here for a quick cap, or the Image Resizer for exact dimensions. When the file simply has to be under a fixed number of kilobytes, turn on Compress to target size.
Typical use cases
| Goal | Typical target | Best approach here |
|---|---|---|
| Email attachment | Under 5–10 MB each | JPG, quality 80, no resize needed for most photos |
| Web page speed / Core Web Vitals | 100–300 KB per image | WebP, quality 75, max width 1600–2000 px |
| Upload form with a hard cap (job portal, visa or passport photo) | Often 50–200 KB, sometimes 20 KB | Target-size mode, JPG output |
| Thumbnails and avatars | 10–30 KB | Max width 400 px, WebP, quality 70 |
| Sending to a printer | Near original | Quality 92+, no resize |
Questions
Does this tool upload my images?
No. Each image is decoded, drawn to a canvas and re-encoded with canvas.toBlob in your browser. Files never leave your device.
Why is my PNG barely smaller?
PNG is lossless. A canvas can only re-compress the same pixels, so a photo saved as PNG stays large. Convert to JPG or WebP, or reduce the dimensions. Lossless PNG optimisers (pngquant, OxiPNG, TinyPNG) rewrite palette and filters, which a browser cannot.
Will it strip EXIF and metadata?
Yes. Re-encoding from a canvas drops EXIF, GPS, camera info and colour profile. Browsers bake in the EXIF orientation before drawing, so the picture stays the right way up even though the tag is gone.
Is there a maximum file size?
No fixed limit, but images are held in memory. Very large images (roughly above 100–250 megapixels, browser dependent) may fail to encode — enable max-width resize for those.
Is transparency preserved?
In WebP and PNG, yes. JPG has no alpha channel, so transparent areas are flattened onto white. Pick WebP if you need small files and transparency.
How do I compress an image online without losing too much quality?
Set the quality slider to around 80–90 — that keeps compression artefacts invisible at normal viewing sizes while still cutting file size noticeably. For a guaranteed file size, turn on target-size mode and let the tool search for the highest quality that fits your KB limit.