Image Compressor

Key takeaways

• Runs fully in your browser — photos never leave the tab
• JPEG and WebP quality slider; PNG stays lossless
• Shows before/after size so you can pick a quality that fits email caps
• Accepts JPG, PNG, WebP, GIF, and BMP inputs

What is image compression?

Image compression re-encodes a photo or screenshot so the file weighs less, usually by lowering JPEG/WebP quality.

This tool draws your image onto a canvas and re-encodes it as JPEG, WebP, or PNG. JPEG and WebP honor a quality slider (lower = smaller); PNG is lossless and mainly useful when you need transparency preserved. Savings vary — already-optimized photos shrink less than large camera exports.

Features

• Quality slider

  Dial JPEG/WebP quality from rough draft to near-lossless.

• Format choice

  Output as JPEG, WebP, or PNG depending on the job.

• Before/after sizes

  See byte savings immediately after each encode.

• Private canvas encode

  Processing stays on-device — no upload of image bytes.

How it works

1. 1

   Drop an image

   JPG, PNG, WebP, GIF, or BMP up to the file size limit.

2. 2

   Pick format and quality

   Use JPEG/WebP for photos; PNG when you need transparency.

3. 3

   Compress and download

   Review the size report, then save the smaller file.

Example walkthroughs

• Email a camera photo

  Typical phone photos drop several megabytes while staying sharp for email.

  IMG_4021.jpg at quality 0.75 → JPEG

• WebP for a blog hero

  Converts and compresses a large PNG into a lighter WebP for page weight.

  hero.png → WebP quality 0.8

Use cases

• Hit attachment limits

  Shrink screenshots and photos to fit Gmail or ticket systems.

• Prepare web assets

  Produce lighter JPEG/WebP files before uploading to a CMS.

Code snippets

• Canvas re-encode in JS

  js

  The same canvas pipeline this tool uses for private compression.

  const bitmap = await createImageBitmap(file);
  const canvas = document.createElement("canvas");
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;
  canvas.getContext("2d").drawImage(bitmap, 0, 0);
  const blob = await new Promise((r) => canvas.toBlob(r, "image/jpeg", 0.75));

Common errors

• File barely got smaller

  Cause: The source was already compressed, or you chose PNG (lossless).

  Fix: Switch to JPEG/WebP and lower quality, or resize dimensions first.

• Transparency turned into a black/white box

  Cause: JPEG has no alpha channel.

  Fix: Keep PNG or use WebP when transparency must survive.

About Image Compressor

Image Compressor is a private workspace for shrinking photos and screenshots before you email, upload, or attach them. Drop an image, pick JPEG or WebP with a quality setting (or PNG when you need lossless/transparency), then download the smaller file. Everything runs with the browser canvas — nothing is POSTed to a server.

People searching “compress jpg online” usually hit a hard limit: a 10 MB attachment cap, a CMS max upload, or a slow mobile connection. Re-encoding at 70–85% quality often cuts camera exports dramatically while remaining acceptable for web and email use. This tool surfaces before/after bytes so you can iterate without guessing.

Honest limits matter. Compressing an already-tiny WebP will not magically save 90%. PNG “compression” here means re-saving as PNG (lossless) — for smaller PNGs of photos, convert to JPEG/WebP instead. GIF animations are flattened to a single frame because canvas encode has no animation pipeline.

Privacy is the reason to prefer a local compressor over hosted TinyWow-style upload sites when the photo includes IDs, whiteboards, or customer screens. Pair with Image Converter when you need a format change first, or Resize Image when dimensions — not just bytes — are the constraint.

Best practice: start around 0.75 quality for JPEG photos, check the size report, then nudge quality until the file fits. Keep the original until you confirm the compressed copy looks acceptable at the size you will actually display.

Frequently asked questions

Explore more

• All tools

  Browse formatters, converters, encoders, and more.

• Image tools

  Compress, resize, convert, and crop images in your browser.

• Privacy

  How client-side tools handle your data.