DEV Community

Max
Max

Posted on

I stopped uploading client images to compressors — here's the browser-only workflow I use now

#javascript #security #webdev #privacy

A while back I was prepping images for a client site. Some of the photos were under NDA — product shots that weren't public yet. And I caught myself doing what I'd done a hundred times: dragging them into an online compressor to shrink them before upload.

Then it hit me. I was uploading confidential client images to a random third-party server, just to save a few hundred KB. I had no idea where those files went, how long they were kept, or who could see them.

That's a bad habit, and if you build sites for clients, you probably have it too.

Why the usual tools are a quiet risk

Most "compress images online" tools upload your file to their server, process it there, and hand it back. That's fine for a meme. It is not fine for:

  • Client photos under NDA
  • Internal product screenshots
  • Anything with people's faces you don't have distribution rights to
  • Medical, legal, or financial documents saved as images

The compression is convenient. The upload is the problem.

The fix: compress in the browser, upload nothing

Modern browsers can resize and re-encode images entirely on your machine with the Canvas API. The file never leaves your laptop. You can prove it: open DevTools → Network tab, compress an image, and watch — zero requests go out.

Here's the minimal version of what's happening under the hood:

async function compress(file, quality = 0.8, maxWidth = 1920) {
  const bitmap = await createImageBitmap(file);
  const scale = Math.min(1, maxWidth / bitmap.width);
  const canvas = document.createElement('canvas');
  canvas.width = bitmap.width * scale;
  canvas.height = bitmap.height * scale;
  canvas.getContext('2d').drawImage(bitmap, 0, 0, canvas.width, canvas.height);
  return new Promise(res =>
    canvas.toBlob(res, 'image/webp', quality) // WebP: usually 60-80% smaller
  );
}
Enter fullscreen mode Exit fullscreen mode

That's the whole trick. createImageBitmap decodes, canvas resizes, toBlob re-encodes to WebP/JPEG. No backend. No upload. It works offline.

If you don't want to wire it up yourself

I turned this into a small tool called QuickShrink — it's the browser-only version of TinyPNG, with presets for web/social/email/print, PNG→WebP conversion, and resize. Everything runs client-side; it's a PWA so you can install it and use it on a plane. Free, no account.

But honestly, whether you use my tool, Squoosh, or the 12 lines above — the point is the same: for anything confidential, compress locally. The upload is the part you should be paranoid about, not the compression.

The rule I follow now

  • Public/throwaway image → whatever tool is fastest is fine
  • Client, NDA, faces, or docs → browser-only, upload nothing

Takes the same amount of time. Removes an entire category of "wait, where did that file go?" risk.

What's your workflow for prepping client images? Still uploading, or local-only?

Top comments (0)