DEV Community

Jack Green
Jack Green

Posted on Originally published at image-compressor.jackgreen.top

I Built a Client-Side Image Compressor That Never Touches a Server

I Built a Client-Side Image Compressor That Never Touches a Server

Stop uploading your photos to cloud compressors. Your images are personal — they shouldn't leave your device.

The Problem

Every image compressor online works the same way:

  1. You drag your photo onto their website
  2. It uploads to their server
  3. They compress it (and probably store it)
  4. You download the result

Services like TinyPNG, imgonline, and even Adobe Lightroom all require uploading your images to their infrastructure. That's fine for public memes. It's not fine for:

  • Family photos
  • Screenshots with sensitive info
  • Documents with personal data
  • Any image you wouldn't want sitting on a stranger's server

The Solution

I built Image Compressor — a tool that compresses images entirely in your browser using the Canvas API. No uploads. No servers. No subscriptions.

How It Works

async function compressImage(file, quality, format) {
  const img = await loadImage(file);
  const canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  return new Promise(resolve => {
    canvas.toBlob(blob => resolve(blob), `image/${format}`, quality / 100);
  });
}
Enter fullscreen mode Exit fullscreen mode

That's literally the entire compression engine. Canvas API draws the image, toBlob() re-encodes it at the specified quality. Zero dependencies. Zero network requests.

Features

  • Drag & drop — just drop images in
  • Quality slider — 1% to 100%, see results instantly
  • Format conversion — JPEG, PNG, WebP, AVIF
  • Batch processing — compress multiple images at once
  • Before/after sizes — see exactly how much space you saved
  • Works offline — no server connection needed after first load
  • Dark mode — because your eyes deserve it

Why WebP?

WebP typically produces files 25-35% smaller than JPEG at equivalent quality. The tool defaults to WebP for best compression, but you can pick any format.

Pricing

$9 one-time. No subscription. No limits. The free tier lets you compress 1 image per session — that's it. Everything else is unlimited.

Compare that to:

  • TinyPNG: $99/year
  • Adobe Lightroom: $120/year
  • Most "free" compressors: upload your photos to their server

Try It

Compress images for free

Built with vanilla HTML, CSS, and JavaScript. No frameworks. No build step. Just a single file that runs in your browser.


Co-Authored-By: Claude noreply@anthropic.com

Top comments (0)