Skip to main content
IC

Image Compressor

Shrink an image's file size by re-encoding it at a chosen quality level — live before/after size comparison, JPEG/WebP/PNG output, done locally.

Did you like the tool? Thanks!
Share:

More Image Tools Tools

IC

Image Cropper

Crop any image to exactly the area you need, with a live preview — nothing is uploaded, everything happens in your browser.

IR

Image Resizer

Resize any image to an exact width and height in your browser — optional aspect-ratio lock, PNG/JPEG/WebP output, nothing uploaded.

IF

Image Flip & Rotate

Flip an image horizontally or vertically and rotate it by any angle — quick 90/180/270° buttons or a free-angle slider, corners never clipped.

IT

Image to Base64

Convert an image into a Base64-encoded string — full data URI or raw Base64, character count, one-click copy, all done locally.

BT

Base64 to Image

Paste a Base64 string or data URI and preview the decoded image instantly — auto-trims whitespace, lets you pick the assumed format, download in one click.

PI

Placeholder Image Generator

Generate a simple placeholder image for wireframes and mockups — custom size, colors and text, auto-sized to fit, PNG/JPEG/WebP output.

IF

Image Format Converter

Convert an image between PNG, JPEG, WebP and BMP entirely in your browser — no upload, instant preview, adjustable quality.

FG

Favicon Generator

Turn any image into a complete favicon package — six PNG sizes plus a combined multi-resolution .ico file, generated locally in your browser.

AA

ASCII Art Generator

Turn a photo into text-based ASCII art, or type a short message as a large block-letter banner — both rendered entirely in your browser.

QC

QR Code Generator

Generate a real, scannable QR code from text, a URL, Wi-Fi details, an email address or a phone number — encoded entirely in your browser, no external API.

Compressing…

Everything processes locally in your browser — the image is never uploaded anywhere.

PNG is always lossless, so the quality slider has no effect on a PNG output — file size depends only on the image's own content. Choose JPEG or WebP to actually trade quality for a smaller file.

Before

After

Reduction

%

How to Use Image Compressor

Choose an image, then drag the quality slider from 0 to 100 and pick an output format. The preview, and the before/after file size comparison beneath it, update automatically as you adjust either setting. When the result looks right, click download to save the compressed file. Everything is computed from the actual bytes of the file you chose and the actual bytes of the re-encoded result — there's no upload involved.

About Image Compressor

Every image file format makes a trade-off between file size and fidelity, and understanding that trade-off is the key to using a compressor effectively rather than just dragging a slider and hoping. Formats split into two broad families: lossless formats, like PNG, store every pixel's exact value and can always be decompressed back to bit-for-bit the same image, at the cost of larger files for photographic content; and lossy formats, like JPEG and (optionally) WebP, deliberately discard information a human eye is unlikely to notice — subtle colour gradients, fine texture detail in busy areas of a photo — in exchange for dramatically smaller files. This is precisely why PNG has no quality slider and JPEG does: PNG's compression is mathematically exact regardless of any setting, so there's nothing to trade away, while JPEG's entire design is built around a tunable quality parameter that controls exactly how much visual information gets discarded. JPEG achieves its compression primarily by splitting an image into small blocks and representing each block using a mathematical transform (a discrete cosine transform) that separates coarse, important visual detail from fine detail a viewer is less likely to consciously notice, then discarding more or less of that fine detail depending on the requested quality level. At quality 90-100, very little is discarded and the result is close to visually indistinguishable from the original at normal viewing sizes; at quality 50 and below, you'll start to see visible "blocky" artefacts, especially around sharp edges like text or strong contrast lines, because a meaningful share of the fine detail has been discarded to hit that file size target. WebP uses a more modern, generally more efficient lossy compression scheme, so at the same visual quality it typically produces smaller files than JPEG — one of the main reasons many websites have adopted it as a JPEG replacement for photos. Choosing the right format and quality is a matter of matching the image's actual content and your actual constraint. A photograph with smooth gradients and natural texture compresses well under lossy JPEG or WebP at a moderate-to-high quality, often shrinking to a fraction of its original size with no visible loss at normal viewing distance. A screenshot, logo, or image with large flat colour areas and sharp text edges, on the other hand, often compresses better and looks noticeably cleaner under PNG (or WebP's lossless mode) than under JPEG, because JPEG's block-based approach tends to introduce visible ringing artefacts around sharp, high-contrast edges — exactly the kind of content flat-colour graphics are made of. The most reliable way to choose a quality setting is to actually look at the before/after comparison rather than assume a number: this tool re-encodes the image live as you move the slider, so you can watch the file size drop and judge for yourself at what point the visual trade-off stops being worth it for your specific image and use case, rather than trusting a single rule of thumb that won't hold for every photo.

Details & Tips

How compression happens here: once an image is loaded, it's drawn onto an in-page canvas at its original pixel dimensions (this tool changes file size, not pixel dimensions — pair it with the Image Resizer tool first if you also need smaller pixel dimensions). Every time you move the quality slider or change the format, the canvas calls `canvas.toBlob(callback, mimeType, qualityArg)`, where `mimeType` is `image/jpeg`, `image/webp` or `image/png` based on your selection, and `qualityArg` is your slider value divided by 100 — because `toBlob()`'s quality parameter is documented to expect a float between 0.0 and 1.0, not the 0-100 scale shown on the slider. For `image/png`, this quality argument is silently ignored by the browser, since PNG compression has no lossy quality dial — this is why the tool shows an explanatory note whenever PNG is selected, rather than hiding the (still valid) option. The before/after comparison is computed directly from real byte counts, not an estimate: "Before" is the original uploaded file's `File.size` in bytes, exactly as reported by the browser when you chose the file, and "After" is the `Blob.size` of the freshly re-encoded result returned by `toBlob()`. The percentage reduction shown is `Math.round((1 - afterSize / beforeSize) × 100)` — a genuine measurement of the two real byte counts, not a lookup table or approximation, so it reflects exactly what you'd see if you compared file sizes on disk after downloading. Worked example: a 3000×2000 JPEG photo straight from a modern phone camera, often around 4-6MB, typically shrinks to somewhere in the 400KB-900KB range at quality 60-70 with no obvious visual loss at normal viewing sizes — a reduction commonly in the 80-90% range, though the exact number depends heavily on the photo's own content (how much fine detail and noise it contains). A flat-colour PNG logo or screenshot, by contrast, often barely changes size when re-encoded as PNG (since it's already losslessly compressed and there's no quality dial to adjust), but can shrink dramatically if switched to JPEG or lossy WebP at a moderate quality — at the cost of introducing visible ringing artefacts around any sharp text or edges, which is exactly the trade-off described in the introduction above for content types PNG suits better. Because every slider movement triggers a fresh re-encode, the tool debounces rapid changes by about 150 milliseconds so dragging the slider doesn't trigger dozens of redundant `toBlob()` calls per second — you'll see the before/after numbers settle a moment after you stop moving the slider, rather than updating on every single intermediate value.

Frequently Asked Questions

Why doesn't the quality slider do anything when I pick PNG?
PNG is a lossless format — it always stores every pixel exactly, so there is no quality dial to adjust. The slider's value is passed to the browser's export call but silently ignored for PNG output; choose JPEG or WebP if you want the quality slider to actually change the file size.
How is the "before" and "after" file size calculated?
Before is the exact File.size of the file you uploaded, in bytes, as reported by the browser. After is the exact Blob.size of the freshly re-encoded result. The percentage reduction is calculated directly from these two real numbers, not estimated.
Should I use JPEG or WebP?
WebP's lossy compression is generally more efficient than JPEG's at the same visual quality, producing smaller files — a good default if the platform you're uploading to supports WebP. JPEG remains the safer choice for maximum compatibility with older software or systems.
What quality setting should I use for photos?
There's no universal number — it depends on the photo's own content. Watch the live preview and the file size drop as you move the slider, and stop at the point where the size savings stop being worth the visible loss for your specific image.
Why does my screenshot or logo look worse after compressing as JPEG?
JPEG compresses using small blocks and tends to introduce visible ringing artefacts around sharp edges and text, which flat-colour graphics have a lot of. PNG or WebP's lossless mode usually suits this kind of image better than lossy JPEG.
Does this tool change the pixel dimensions of my image?
No — only the compression/encoding changes, not the width or height. If you also want to reduce pixel dimensions to save additional file size, use the Image Resizer tool either before or after compressing.
Is my image uploaded anywhere to be compressed?
No. The entire process — drawing the image to a canvas and re-encoding it via toBlob() — runs locally using JavaScript in your browser. Nothing is transmitted to a server at any point.
Why did the slider stop updating results immediately while I was dragging it?
Re-encoding the image on every single pixel of slider movement would trigger dozens of redundant operations per second, so updates are debounced by about 150 milliseconds — results settle a moment after you stop moving the slider.
What does the toBlob() quality parameter actually accept?
A floating-point number from 0.0 to 1.0, per the browser's own API specification — the 0-100 slider shown on the page is simply divided by 100 before being passed through, since that scale is more intuitive to read and adjust.
Can compressing an image ever make the file bigger?
Occasionally, yes — for example re-encoding an already highly-optimized PNG at a very high JPEG quality, or an image with very little visual redundancy to compress. The percentage reduction shown will simply be negative in that case, which is why it's worth checking before downloading.
What file formats can I upload?
Any file the browser reports as an image/* MIME type — JPEG, PNG, WebP, GIF, BMP and others are all readable as a source; non-image files show an inline error immediately rather than being processed.

Also Available As

image compressor, compress image online, reduce image file size, jpeg compressor, webp compressor, shrink photo size

Found a Problem?

Let us know if something with Image Compressor isn't working as expected.

Thanks — we'll take a look.