Compressing images in the browser with the Canvas API (no server needed)

swifttooly — Sun, 12 Jul 2026 19:48:12 +0000

A while ago I wrote about why I built 50+ browser-based tools with zero backend. This time I want to go deeper into one specific tool: image compression that runs entirely in the browser. No upload, no server, no API — just the Canvas API doing all the work on the user's device.

Here's how it works, plus a couple of gotchas that cost me real debugging time.

The core idea

Image compression in the browser is surprisingly simple in principle:

Read the user's file with the File API
Draw it onto a <canvas>
Re-export the canvas as a Blob at a lower quality
Trigger a download

That's it. The user's photo never leaves their machine.

The code

async function compressImage(file, quality = 0.7) {
  // 1. Load the file into an Image element
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await img.decode();

  // 2. Draw it onto a canvas
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);

  // 3. Re-export as a compressed Blob
  const blob = await new Promise(resolve =>
    canvas.toBlob(resolve, 'image/jpeg', quality)
  );

  URL.revokeObjectURL(img.src);
  return blob;
}

Then downloading is just:

function downloadBlob(blob, filename) {
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = filename;
  a.click();
  URL.revokeObjectURL(a.href);
}

Gotcha #1: transparent PNGs turn black

This one bit me in production. If the input is a PNG with transparency and you export it as JPEG, the transparent areas become solid black — JPEG has no alpha channel.

Two ways to handle it:

Option A — fill a white background first:

ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);

Option B — detect transparency and export WebP instead (WebP supports alpha and compresses well):

const outputType = hasTransparency ? 'image/webp' : 'image/jpeg';
canvas.toBlob(resolve, outputType, quality);

I went with Option B — users who upload a transparent logo expect to get a transparent result back.

Gotcha #2: compression can make files BIGGER

If the input is already heavily optimized (or tiny), re-encoding it can produce a larger file. Always compare sizes and never return a worse result:

if (blob.size >= file.size) {
  return file; // keep the original
}

Sounds obvious, but a lot of online compressors skip this check and happily hand you a "compressed" file that's bigger than what you started with.

Gotcha #3: huge images can crash the tab

A 50-megapixel photo drawn onto a canvas can eat enough memory to kill the tab on mobile — silently, with no error. Add a size guard before decoding and show a friendly message instead of letting the browser die.

Why bother doing this client-side?

Privacy: the user's photos never touch a server. Nothing to store, nothing to leak.
Cost: zero bandwidth and zero server bills, no matter how many people use it.
Speed: no upload/download round-trip — compression starts instantly.

The limits are real too: no server means no ML-based smart compression, and very large batches are constrained by device memory. For everyday "shrink this photo before emailing it" use cases, though, the browser is more than enough.

Try it live

I use exactly this approach (plus resize-before-compress for extra savings) in the Image Compressor on SwiftTooly — free, no sign-up, and your files stay on your device.

Questions about the implementation? Happy to share more details in the comments — the PDF compression story is even messier, and I might write that one up next.

Why I built 50+ browser-based tools with zero backend

swifttooly — Sun, 28 Jun 2026 20:35:00 +0000

For years, every time I needed to merge a PDF or compress an image online, I had to upload my private files to some random server and just hope they got deleted. That always felt wrong.

So I started building small tools that do everything in the browser — no upload, no backend, no database. The files never leave the user's device. I ended up with 50+ of them, and I want to share what I learned about going fully client-side.

Why client-side?

Three big wins:

Privacy: the user's files never touch a server. Nothing to leak, nothing to store, nothing to comply with.
Cost: no server means no hosting bill that scales with traffic. A static site can handle millions of users.
Speed: no upload/download round-trip. The work happens instantly on the user's machine.

The browser can do more than people think

Most "simple" tools don't actually need a server. Modern browser APIs cover a huge amount:

Canvas API — resize, crop, compress, and convert images entirely in memory.
File API + Blob — read user files and trigger downloads without ever uploading.
Web Crypto API — hashing (SHA-256, etc.) natively, no library needed.
Libraries like pdf-lib and pdf.js — full PDF manipulation (merge, split, rotate) on the client.

For example, compressing an image is just: read the file → draw it to a canvas → re-export at a lower quality → download the blob. No server in the loop.

What does NOT work client-side

Being honest about the limits, because this matters:

Downloading videos from YouTube/TikTok — blocked by CORS, needs a server.
Anything needing live data (real-time currency rates, etc.) — needs an API.
Heavy video transcoding — technically possible with WASM but painful and slow.

Knowing what can't be done client-side saved me from shipping broken tools.

The result

I put all of this into [SwiftTooly] — a free collection of browser-based tools (PDF, image, text, QR, converters, dev utilities). Everything runs locally, no sign-up.

Happy to answer questions about any of the implementations — the image and PDF stuff especially has some fun edge cases.

What other tools do you think genuinely don't need a backend?

DEV Community: swifttooly