DEV Community: yangjiaqiang12

Client-Side Image Processing: Why Your Images Should Never Leave Your Browser

yangjiaqiang12 — Mon, 18 May 2026 16:49:37 +0000

The Status Quo Is Broken

Upload an image to compress it. Upload a photo to remove its background. Upload a PDF to merge pages. Upload, upload, upload.

Every upload means your file lives on someone elses server, you trust their privacy policy, you wait for network round-trips, and you wonder if your data actually gets deleted.

The alternative? Process everything client-side.

What the Browser Can Do in 2026

Modern browsers are full application runtimes:

API	What It Enables
Canvas API	Pixel-level image manipulation, resizing, format conversion
WebAssembly	Near-native performance for heavy computation
Web Workers	Multi-threaded processing without blocking the UI
WebCodecs API	Direct access to hardware video/audio codecs
File System Access API	Read/write local files with user permission

Combined, these APIs make server-side processing unnecessary for most image, video, and document operations.

Real Benchmark: Browser vs Server

Compressing a 2MB photo:

Method	Time	Privacy
Browser (Canvas API)	1.2s	Local
TinyPNG (upload + process + download)	4.3s	Server
Compressor.io	6.1s	Server

The browser is 3-5x faster because there is no network overhead. And your image never left your device.

The Privacy Argument

This is not just about speed. It is about liability. If you process client images for work -- real estate photos, medical documents, legal evidence, unreleased product designs -- uploading them to a third-party service is a professional risk.

Browser-based processing eliminates that risk entirely.

The Code

async function compressImage(file, quality = 0.8, maxWidth = 1920) {
  const dataUrl = await new Promise(r => {
    const reader = new FileReader();
    reader.onload = e => r(e.target.result);
    reader.readAsDataURL(file);
  });
  const img = await new Promise(r => {
    const i = new Image();
    i.onload = () => r(i);
    i.src = dataUrl;
  });
  let w = img.width, h = img.height;
  if (w > maxWidth) { h *= maxWidth / w; w = maxWidth; }
  const canvas = Object.assign(document.createElement("canvas"), { width: w, height: h });
  canvas.getContext("2d").drawImage(img, 0, 0, w, h);
  return new Promise(r => canvas.toBlob(r, "image/webp", quality));
}

20 lines. No dependencies. No server.

The Growing Ecosystem

More tools are going client-side:

Image compression: Squash -- free, open source, batch processing
Background removal: @imgly/background-removal -- runs models locally via WebAssembly
PDF tools: Stirling PDF -- self-hosted, local processing
Code editors: Monaco -- VS Code engine, runs in browser
Design tools: Figma -- entire design engine in WebAssembly

The Future

WebGPU is here. WebTransport is standardized. The line between desktop and web apps is disappearing. The tools that win will respect user privacy by default -- not as a premium feature, but as a technical guarantee.

Check out Squash for free, private image compression. Source on GitHub. Support on Ko-fi.

5 Free Image Compression Tools Compared: Privacy, Speed, and Quality (2026)

yangjiaqiang12 — Mon, 18 May 2026 16:37:02 +0000

The Test

I tested 5 popular free image compression tools on the same 2MB photo to compare privacy, speed, and output quality. Here are the results.

Results

Tool	Privacy	Batch	WebP	Output Size	Time
Squash	? Local	? Yes	?	384KB	1.2s
Squoosh	? Local	? No	?	367KB	1.8s
TinyPNG	? Upload	? Yes	?	402KB	4.3s
Compressor.io	? Upload	? Yes	?	411KB	6.1s
Optimizilla	? Upload	? Yes	?	426KB	5.8s

Key Findings

Privacy-first tools are faster. Squash and Squoosh process images locally using the Canvas API. No network round-trip means 3-5x faster compression.

Batch mode matters. Squoosh produces the smallest files but processes images one at a time. If you have 20 product photos, that is 20 manual clicks. Squash combines batch processing with local privacy -- a combination no other free tool offers.

WebP is the format to beat. Tools supporting WebP output achieved 20-30% smaller files than JPEG-only tools at equivalent quality. WebP browser support is now at 97% globally.

Upload-based tools are slower. TinyPNG and Compressor.io add 3-6 seconds of network latency per image. For batch work, this adds up quickly.

The Privacy Factor

Uploading images to a third-party server is not just a privacy concern -- it is a compliance issue. If you handle client work, medical images, financial documents, or unreleased products, server-based tools are a liability.

Browser-based tools solve this completely. The image never leaves your device. There is no server to hack, no database to leak, no privacy policy to trust.

Bottom Line

Best overall: Squash -- free, private, batch mode, multi-format
Best quality: Squoosh -- slightly better compression but no batch mode
Best if you do not care about privacy: TinyPNG -- established, reliable, but uploads your files

?? Try Squash: yangjiaqiang12.github.io/squash-image-compressor

?? Source: github.com/yangjiaqiang12/squash-image-compressor

? Support: ko-fi.com/squashtools

I Built a Free Image Compressor That Never Uploads Your Files

yangjiaqiang12 — Mon, 18 May 2026 16:29:39 +0000

The Problem

Every time you use an online image compressor, your files get uploaded to someone else's computer. TinyPNG does it. Compressor.io does it. Even most so-called "free" tools collect your data on their servers.

This has always felt wrong to me. Images can contain sensitive stuff -- screenshots of conversations, private photos, business documents, unreleased designs. Why should making them smaller require handing them to a stranger?

The Solution: Squash

Squash is a free, open-source image compressor that runs entirely in your browser.

🚫 No uploads -- everything stays on your device
⚡ Instant compression -- no waiting for network round-trips
🎨 Multi-format -- JPEG, PNG, WebP support
📦 Batch processing -- compress multiple images at once
🎚️ Quality slider -- full control from 1% to 100%
📐 Resize -- set max dimensions while compressing
🌓 Dark mode -- works great at night
💰 Completely free -- no limits, no watermarks

How It Works

Squash uses the browser Canvas API to decode images, apply compression settings, and re-encode them at your chosen quality level. All the heavy lifting happens on your device hardware -- not on some server farm.

The processing pipeline:

Load -- Image is decoded from file into raw pixel data
Resize -- If a max width is set, image is scaled down
Encode -- Pixel data is re-encoded at the chosen quality and format
Download -- The compressed result is ready to save

No server. No upload. No privacy concern.

Why I Built This

I wanted a tool that respects privacy. Not as a marketing slogan -- as a technical guarantee. Your images literally cannot be uploaded because there is no server to upload them to. The entire application is static HTML, CSS, and JavaScript served from GitHub Pages.

The source code is open (MIT license). You can inspect every line. You can host it yourself. You can verify that nothing leaves your browser.

Comparison with Other Tools

Tool	Privacy	Batch Mode	WebP Support	Price
Squash	✅ Local only	✅ Yes	✅ Yes	Free
Squoosh	✅ Local only	❌ No	✅ Yes	Free
TinyPNG	❌ Uploads	✅ Yes	✅ Yes	Free (20/day)
Compressor.io	❌ Uploads	✅ Yes	❌ No	Free (10MB cap)

The key difference: Squash and Squoosh process locally. But Squoosh has no batch mode. Squash is the only tool that combines local processing + batch mode + multi-format + unlimited use.

Tech Stack

Vanilla HTML/CSS/JavaScript -- No frameworks, no dependencies
Canvas API -- Browser-native image processing
GitHub Pages -- Free, fast static hosting
Zero backend -- No server, no database, no API calls

Try It Yourself

👉 Launch Squash

📂 Source Code on GitHub

If you find it useful, consider buying me a coffee ☕ -- it helps keep the project alive and improving.

Built with vanilla HTML/CSS/JS. No frameworks, no dependencies, no build step. MIT licensed.