Building a 100% In-Browser Image Compressor & Converter with Zero Server Uploads

Most online image compressors require uploading photos to remote cloud servers. For private identity documents, signatures, or personal images, this introduces unnecessary privacy concerns.

To address this, I built PixelQuick — a lightweight, entirely client-side image utility that runs strictly within the browser using vanilla JavaScript and the HTML5 Canvas API.

Key Features

• Zero Server Uploads: Processing happens entirely in local RAM; files never touch a remote backend.
• Exact Size Limits: Auto-compresses images to exact targets (e.g., 20 KB, 50 KB, 100 KB) commonly required for online forms and portals.
• Format Conversion: Fast conversion between JPG, PNG, WEBP, and PDF.
• Aspect Ratio & Dimensions: Built-in passport size (35×45 mm) and standard presets.
• Offline QR Code Utility: Quick generator running offline.

How It Works Under the Hood

The core compression relies on the HTML5 <canvas> element and canvas.toBlob():

javascript
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

// Draw resized image
canvas.width = targetWidth;
canvas.height = targetHeight;
ctx.drawImage(img, 0, 0, targetWidth, targetHeight);

// Export with controlled quality
canvas.toBlob((blob) => {
  const compressedUrl = URL.createObjectURL(blob);
  // Download or preview
}, 'image/jpeg', quality);

### Try It Out
You can try the live tool here: [PixelQuick](https://pixelquick.netlify.app/)

Enter fullscreen mode Exit fullscreen mode