Image Compressor

What is an image compressor?#

This tool shrinks an image’s file size by re-encoding it through the browser’s Canvas pipeline at a lower quality, a different format, or a smaller pixel size — whichever combination you choose. The output is a new file you can download, with a before/after size comparison so the trade-off is visible. It is the everyday “this photo is too big to attach” fix, done locally with no upload.

Three levers are available, and they compose:

• Format — JPEG (lossy, opaque), WebP (lossy, modern, roughly 25–35% smaller than JPEG at equal quality), or PNG (lossless; only shrinks via resize, never via quality loss).
• Quality — a 5–100 slider that maps to the encoder’s quality setting. Applies to JPEG and WebP only; the slider is hidden for PNG because PNG cannot lose quality by design.
• Max width / height — optional caps that scale the image down (preserving aspect ratio, never upscaling) before encoding. Resizing is by far the biggest size win for photographs.

Because the work happens on a <canvas> via createImageBitmap and canvas.toBlob, your image is decoded, transformed and re-encoded in-memory; the original file is untouched.

How to use it#

1. Drop an image onto the dashed zone.
2. In the controls row, pick:
   • Format — defaults to the source type for PNG/WebP, JPEG for everything else.
   • Max width / Max height — leave blank for “auto” (no resize), or enter a pixel cap. The image is scaled to fit inside the box without distortion.
   • Quality — drag the slider (5–100); the current value is shown beside it. Ignored for PNG.
3. Click Compress. The stats bar shows Original, Compressed and Saved (bytes and percentage), plus a notice if the result is somehow larger.
4. Download the compressed file. The preview shows the result so you can judge visual quality.

Key features#

• Format-aware defaults. PNG stays PNG (so transparency and sharp edges survive); photographs default to JPEG; the tool never silently destroys an alpha channel.
• Aspect-preserving resize. Max width and height define a bounding box; the image fits inside with its ratio intact and is never upscaled.
• Honest size reporting. When a re-encode produces a larger file (common for PNG-to-PNG or an already-tiny JPEG), the tool says so instead of pretending it saved space.
• WebP output. Modern browsers cut another 25–35% over JPEG at the same visual quality; handy for web assets.
• Local pipeline. The Canvas APIs do the encode; nothing is uploaded.

Worked example#

A 4.5 MiB phone photo at 4032×3024 is too large to email. Drop it, set Format to WebP, Max width to 1920 (height auto-scales to 1440), Quality to 80. Click Compress. The stats bar reports:

The resize did most of the work (about 4× fewer pixels); WebP at quality 80 handled the rest. The result is under half a megabyte and visually indistinguishable on screen.

Trying the same source as PNG at quality 100 with no resize, by contrast, typically reports the compressed file as larger — PNG is lossless and cannot discard the photo’s noise the way JPEG or WebP do. The tool flags it with the “larger” notice rather than claiming a fake saving.

FAQ#

The quality slider is greyed out — why?#

PNG is a lossless format; it has no quality dial. When you pick PNG the slider hides because it has no effect. Switch to JPEG or WebP to control quality.

My “compressed” file is bigger than the original. How?#

Two common causes: you re-encoded an already-compressed JPEG as PNG (PNG cannot match JPEG’s lossy compression on photos), or the source was a tiny, highly-compressed image and the PNG re-encode added overhead. Pick a lossy format (JPEG or WebP) and/or enable resize.

Does it upscale if I enter a huge max width?#

No. Max width and height only cap the upper bound; if the source is already smaller, it is passed through at its original size. Upscaling would only inflate the file with no quality benefit.

Is WebP safe to use everywhere?#

Modern browsers (Chrome, Edge, Firefox, Safari 14 and later) all support WebP. If you need to support very old browsers or certain image-processing pipelines, fall back to JPEG.