How I Built a Fast, Serverless Online Image Compressor Using TypeScript and Wasm

We Luv Tools — Mon, 03 Aug 2026 18:52:49 +0000

Hey DEV Community! 👋

I recently built an all-in-one image compression tool for WeLuvTools designed to compress images instantly right in your browser without ever sending files to a backend server.

Here is a quick look at why and how I built it using TypeScript, WebAssembly (Wasm), and Web Workers.

💡 Why Build a Client-Side Compressor?

Most online image compressors require uploading files to a server, processing them, and downloading them back. This approach has a few drawbacks:

Privacy Concerns: Users have to trust servers with their personal or sensitive images.
Network Overhead: Uploading large files takes bandwidth and time.
Server Costs: Running heavy image-processing algorithms on a backend gets expensive quickly.

By leveraging modern web APIs, we can offload 100% of the image processing directly to the user's browser.

🛠️ The Tech Stack & Architecture

Here is how the underlying architecture works:

TypeScript: Keeps the UI state clean, type-safe, and predictable across different image formats and options.
WebAssembly (Wasm): Handles high-performance image encoding/decoding algorithms (like MozJPEG, WebP, PNGQuant) compiled directly to native-like speeds in the browser.
Web Workers: Prevents UI freezing! Heavy image compression tasks are offloaded to background threads so the UI stays smooth at 60 FPS while processing large images.

⚡ Key Features

🔒 100% Private: Zero server uploads—your images never leave your browser.
⚡ Blazing Fast: Powered by Web Workers and Wasm for multithreaded speed.
📦 Batch Compression: Compress multiple images simultaneously.
🎨 Format Flexibility: Convert and compress JPEG, PNG, WebP, and more on the fly.

🔗 Try It Out

Check out the compressor live on WeLuvTools and let me know what you think!

I’d love to hear your thoughts on client-side media processing or any feature suggestions you might have. Feel free to ask any technical questions in the comments! 👇

How to Compress Images in the Browser Without Uploading Them

We Luv Tools — Thu, 23 Jul 2026 23:39:44 +0000

Image compression is usually treated as a server-side task. You select an image, upload it to a website, wait for processing, and download the result.

That workflow is convenient, but it is not always ideal for private screenshots, documents, personal photos, or business assets.
A better approach is client-side image compression: the browser reads, processes, and exports the image locally without sending it to a server.
What Is Client-Side Image Compression?
Client-side image compression means the image is processed using browser APIs such as:
File
FileReader
createImageBitmap
HTMLCanvasElement
canvas.toBlob()
The basic flow is:
Select image
↓
Decode image in browser
↓
Draw image to canvas
↓
Export with selected quality
↓
Download compressed file
The original image does not need to leave the device.

Basic Browser Example
async function compressImage(file, quality = 0.8) {
  const bitmap = await createImageBitmap(file);

  const canvas = document.createElement("canvas");
  canvas.width = bitmap.width;
  canvas.height = bitmap.height;

  const context = canvas.getContext("2d");
  if (!context) {
    throw new Error("Canvas is not supported");
  }

  context.drawImage(bitmap, 0, 0);

  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (!blob) {
          reject(new Error("Compression failed"));
          return;
        }

        resolve(blob);
      },
      "image/webp",
      quality
    );
  });
}

The quality value normally ranges from 0 to 1.
For photographs, values between 0.75 and 0.9 are often a practical starting point. Lower values create smaller files but can introduce visible artifacts.
WebP, JPEG, and PNG Behave Differently
Compression results depend on the image format.
JPEG
JPEG is useful for photographs and complex images. It uses lossy compression, so a lower quality setting produces a smaller file but may reduce visual quality.
PNG
PNG is useful for logos, illustrations, and images with transparency. Converting a transparent PNG directly to JPEG removes transparency because** JPEG** does not support alpha channels.
WebP
WebP is useful when you want smaller files with good visual quality. It supports lossy and lossless compression, transparency, and modern browser workflows.
Why Browser-Only Compression Is Useful
Local processing has several advantages:
Privacy: The selected image does not need to be uploaded.
Speed: There is no upload or server-processing wait.
Lower infrastructure cost: Compression does not require a file-processing server.
Offline potential: A properly cached web application can process supported formats without an internet connection.
Better control: Users can choose quality, format, dimensions, and target size.
However, browser-only processing still depends on the device’s memory and browser support. Very large images may require resizing before compression.
A Practical Tool
WeLuvTools provides a browser-based Image Compressor for compressing JPG, PNG, and WebP images without requiring an account.
For workflows involving compression, conversion, and resizing together, the All-in-One Image Tool is more suitable.

DEV Community: We Luv Tools

How I Built a Fast, Serverless Online Image Compressor Using TypeScript and Wasm

💡 Why Build a Client-Side Compressor?

🛠️ The Tech Stack & Architecture

⚡ Key Features

🔗 Try It Out

How to Compress Images in the Browser Without Uploading Them