How Image Compression Works: Code & Execution Architecture

Executive Technical Overview

Traditional web compression services operate via a centralized cloud architecture: user files are sent across the public internet to remote Linux worker servers, processed using CPU-heavy backend binaries (such as ImageMagick, libjpeg-turbo, or Python Pillow), and returned back to the browser. This legacy architecture incurs network latency, cloud infrastructure overhead, and security privacy risks.

TinyImgAI replaces server dependency with a 100% Client-Side Engine built on top of browser-native HTML5 specifications (Canvas 2D Context, V8 TypedArray Buffers, and Asynchronous Web APIs). Images are decoded, resampled, quantized, and serialized directly inside your device's RAM memory without sending a single byte across the network.

⚡ High-Level Execution Pipeline Diagram

[ User File Selection ] 
         │
         ▼
[ Local Heap Pointer (URL.createObjectURL) ]
         │
         ▼
[ Async Image Loader (loadImage Promise) ]
         │
         ▼
[ Offscreen Canvas Memory Context (HTML5 2D) ]
         │ (Alpha fill #FFFFFF if target is JPEG)
         ▼
┌────────────────────────────────────────────────────────┐
│ 🔄 24-Iteration Adaptive Quality & Scale Search Loop   │
│                                                        │
│  1. Render Temp Canvas (scale *= 0.88 downscaling)     │
│  2. Encode Binary Blob (canvasToBlob)                  │
│  3. Check: blob.size <= targetBytes OR scale <= 0.1    │
└────────────────────────────────────────────────────────┘
         │ (Convergence Criteria Satisfied)
         ▼
[ Serialized Binary Output (Blob & Download DOM) ]
         │
         ▼
[ Memory Disposal & Garbage Collection (URL.revokeObjectURL) ]
          

When a user selects or drops an image file, the browser yields a native File interface (subclass of Blob). TinyImgAI assigns a temporary Blob URL string using URL.createObjectURL(file):

// Ingestion & Local Blob Pointer Creation
const available = 20 - state.files.length;
state.files.push(...allowed.slice(0, available).map(f => ({
  file: f,
  name: f.name,
  size: f.size,
  type: f.type,
  url: URL.createObjectURL(f) // Local V8 heap pointer
})));

This creates a direct pointer into local browser memory (blob:http://...), allowing instant rendering into <img> or <canvas> elements without consuming network bandwidth.

Before compressing, TinyImgAI asynchronously loads the image URL into an HTML5 Image object using a promise-wrapped utility function loadImage(url):

function loadImage(url) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error('Image decode failed.'));
    img.src = url;
  });
}

Once decoded into V8 memory, an offscreen HTMLCanvasElement is instantiated matching target dimensions. When converting transparent PNG or WebP files to JPEG, an explicit white background (#FFFFFF) fill is drawn first to prevent black alpha-channel artifacts:

canvas = document.createElement('canvas');
canvas.width = destW;
canvas.height = destH;
const ctx = canvas.getContext('2d');

// Alpha channel preservation check for JPEG export
if (type === 'image/jpeg') {
  ctx.fillStyle = '#ffffff';
  ctx.fillRect(0, 0, destW, destH);
}
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, destW, destH);

The core compression engine executes an adaptive downscaling loop. If a target byte budget is specified (e.g. 100KB), TinyImgAI executes a maximum 24-iteration convergence loop:

let scale = 1, blob;
for (let attempt = 0; attempt < 24; attempt++) {
  let tempCanvas = canvas;
  
  // Progressive Bilinear Resampling if target size exceeded
  if (scale < 1) {
    tempCanvas = document.createElement('canvas');
    tempCanvas.width = Math.max(1, Math.round(canvas.width * scale));
    tempCanvas.height = Math.max(1, Math.round(canvas.height * scale));
    const ctx = tempCanvas.getContext('2d');
    if (type === 'image/jpeg') {
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
    }
    ctx.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height);
  }
  
  const quality = Number.isFinite(encoderQuality) ? Math.max(.1, Math.min(.98, encoderQuality)) : .92;
  blob = await canvasToBlob(tempCanvas, type, quality);
  
  // Check loop termination criteria
  if (!targetBytes || blob.size <= targetBytes || scale <= .1) break;
  
  // Progressive downscaling factor reduction
  scale *= .88;
}

Why scale *= 0.88? A multiplier factor of 0.88 reduces canvas area by approximately ~23% per iteration. This allows rapid logarithmic convergence toward strict byte limits (such as 100KB or 200KB) while maintaining maximum possible pixel density and sharpness.

When a user uploads an image, TinyImgAI dynamically calculates an optimal target recommendation using an empirical format heuristic:

const recommendation = Math.min(
  500, 
  Math.max(
    30, 
    Math.round(
      Math.max(...state.files.map(f => (f.size / 1024) * (f.type === 'image/png' ? 0.78 : 0.88)))
    )
  )
);

For dedicated target pages (compress-image-to-100kb.html, 200kb, 500kb), targetBytes is locked to exact thresholds (e.g. 100 * 1024 = 102,400 bytes), guaranteeing portal compatibility for job applications and portal uploads.

When files are cleared or replaced, TinyImgAI invokes URL.revokeObjectURL(url) to release browser heap memory and prevent memory leaks:

function reset() {
  state.files.forEach(f => URL.revokeObjectURL(f.url));
  state.output.forEach(f => URL.revokeObjectURL(f.url));
  state.files = []; 
  state.output = [];
}

Try the Architecture in Action

Experience zero-upload client-side image compression directly in your browser: