An uncompressed photo from a modern smartphone can be 15–25 MB. Uploaded raw to a website, that image makes every page load visibly slower. Compressed to a reasonable quality level, the same image can drop to 300 KB — 50× smaller — with no perceptible difference to the human eye.
Web performance guidelines from Google and Core Web Vitals assessments penalise large images heavily. For email newsletters, file size limits often block sending large attachments outright. For social media uploads, compression removes metadata you might not want to share. Shrinking images before you upload them solves all three problems.
The browser includes a built-in image codec pipeline. When you draw an image to an
HTML Canvas element and call canvas.toBlob() or
canvas.toDataURL() with a format and quality parameter, the browser's
native codec re-encodes the image at the requested quality level. This is the same
encoder the browser uses for everything else — fast, well-tested, and available without
any server.
The tool's process:
FileReader — it never touches the network.JPEG and WebP compression at less than 100% quality is lossy: some information is permanently discarded. The encoder finds the parts of the image that the human visual system is least sensitive to — smooth gradients, fine high-frequency detail — and represents them with less precision. The result looks almost identical at quality 80–90 but is much smaller.
PNG uses lossless compression — no pixel information is discarded, but the file is compressed more efficiently than an uncompressed bitmap. For most photos, converting a PNG to JPEG at quality 85 produces a dramatically smaller file with imperceptible quality loss. For diagrams and screenshots with flat colours and sharp edges, PNG is usually the better format because lossy encoding smears those edges.
The quality setting runs from 1 (heaviest compression, noticeable artefacts) to 100 (nearly lossless, little size saving). For most photos destined for the web, 75–85 is the sensible range. Below 60, JPEG artefacts become visible: blocky patches around edges, colour banding in gradients. Above 90, the size saving shrinks fast while quality barely improves.
The tool shows you the before and after file size so you can see exactly what each setting buys you. If you're compressing for a specific size limit — say, a 500 KB profile photo requirement — drag the slider until the output size drops below the target.
You can drop multiple images at once. The tool compresses each one independently at the same quality setting and packages the results in a ZIP archive you download in a single click. The ZIP is assembled in your browser using a client-side ZIP library — again, no server involved.
Web developers use it to compress images before committing them to a repository or uploading to a CMS. Bloggers and content creators use it before uploading to WordPress or Substack. Email marketers use it to stay under newsletter image size budgets. Anyone sending photos by email or messaging app uses it when a recipient complains about a slow download.