Building a Client-Side Image Compressor with Canvas API in Next.js

Building a Client-Side Image Compressor with Canvas API in Next.js

Most image compression tools work the same way: upload to server, process, download. That means every file leaves the user's device. For a utility tool focused on privacy, I wanted compression to happen entirely in the browser — no server, no upload, no third-party dependencies.

This post covers how I built the Image Compressor at ultimatetools.io using the browser's native Canvas API, with batch processing support (up to 20 images) and ZIP download via JSZip.

The core idea: Canvas API for compression

The browser's HTMLCanvasElement.toDataURL() method is the heart of client-side image compression. Here is the key insight:

canvas.toDataURL('image/jpeg', quality)

The second argument — quality — is a float between 0 and 1. It controls JPEG compression. At 0.8, the file is typically 60–80% smaller than the original with no visible quality difference.

This is the same technique used by Squoosh, but we add batch processing on top.

Reading the file

Each image is loaded via FileReader or directly from the File object using createObjectURL:

const loadImage = (file: File): Promise<HTMLImageElement> => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = URL.createObjectURL(file);
  });
};

Using createObjectURL is faster than readAsDataURL for large files because it doesn't base64-encode the entire file before loading.

Drawing to canvas and exporting

Once the image is loaded, we draw it to an off-screen canvas and export with the target format and quality:

const compressImage = async (
  file: File,
  quality: number,
  format: 'jpeg' | 'png' | 'original'
): Promise<Blob> => {
  const img = await loadImage(file);
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

  const ctx = canvas.getContext('2d')!;
  ctx.drawImage(img, 0, 0);

  const mimeType =
    format === 'jpeg' ? 'image/jpeg' :
    format === 'png'  ? 'image/png'  :
    file.type;

  return new Promise((resolve) => {
    canvas.toBlob(
      (blob) => resolve(blob!),
      mimeType,
      mimeType === 'image/jpeg' ? quality : undefined
    );
  });
};

A few things worth noting:

PNG compression: toDataURL and toBlob do not accept a quality argument for PNG — PNG is lossless by definition. The canvas API strips unnecessary metadata when re-encoding, which gives a 20–40% reduction on typical screenshots and logos without touching a single pixel.

WebP input: The canvas API handles WebP input fine on modern browsers. For output, we currently export JPEG or PNG (WebP output support is browser-dependent and inconsistent across Safari versions).

Canvas dimensions: We use naturalWidth and naturalHeight to preserve the original resolution. No resizing happens — just re-encoding.

Format toggle: JPEG vs PNG vs original

The tool supports three output modes:

type OutputFormat = 'jpeg' | 'png' | 'original';

• jpeg — converts to JPEG regardless of input (best for photos)
• png — converts to PNG regardless of input (best for logos/screenshots)
• original — keeps the input format, just re-encodes at the given quality

For original mode, we fall back to the file's MIME type (file.type). If the input is WebP and we pass image/webp to toBlob, Chrome handles it correctly. Safari falls back to PNG silently — acceptable behaviour.

Batch processing: processing images sequentially

With up to 20 images, naively firing all Canvas operations in parallel can cause memory spikes. We process images sequentially to keep memory usage flat:

const results: CompressedFile[] = [];

for (const file of files) {
  const blob = await compressImage(file, quality, format);
  results.push({
    name: getOutputFilename(file.name, format),
    blob,
    originalSize: file.size,
    compressedSize: blob.size,
  });
}

Sequential processing means a slight wait for large batches, but it avoids allocating 20 canvases simultaneously — important on mobile devices with limited heap.

ZIP download with JSZip

For batch download we use JSZip:

import JSZip from 'jszip';

const downloadAllAsZip = async (files: CompressedFile[]) => {
  const zip = new JSZip();

  for (const file of files) {
    zip.file(file.name, file.blob);
  }

  const zipBlob = await zip.generateAsync({ type: 'blob' });
  const url = URL.createObjectURL(zipBlob);

  const a = document.createElement('a');
  a.href = url;
  a.download = 'compressed-images.zip';
  a.click();

  URL.revokeObjectURL(url);
};

JSZip is pure JavaScript, runs entirely in the browser, and handles 20 files without issue. The ZIP generation happens in the main thread — for very large batches a Web Worker could offload this, but for 20 images it's fast enough.

Calculating compression stats

After compression, we show the reduction percentage for each file:

const reductionPercent = (
  ((originalSize - compressedSize) / originalSize) * 100
).toFixed(1);

We also show the combined stats across all files — total original size vs total compressed size. This is useful feedback for the user and makes the tool feel responsive.

The PNG lossless limitation

One thing worth being explicit about: PNG compression via canvas is not true lossless optimisation. Tools like pngquant apply palette quantisation to dramatically reduce PNG file size. The Canvas API cannot do that — it just re-encodes.

For a PNG logo with few colours, pngquant might achieve 70% reduction. Our canvas approach achieves 20–40%. If you need maximum PNG compression, a server-side tool with pngquant is more powerful.

For our use case (privacy-first, no upload), the canvas approach is the right trade-off.

Next.js integration

The component is a standard client component ('use client') using useRef for the hidden canvas and useState for the file list and settings:

'use client';

import { useState, useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

export default function ImageCompressor() {
  const [files, setFiles] = useState<CompressedFile[]>([]);
  const [quality, setQuality] = useState(0.8);
  const [format, setFormat] = useState<OutputFormat>('original');

  const onDrop = useCallback(async (acceptedFiles: File[]) => {
    const results = await processFiles(acceptedFiles, quality, format);
    setFiles(results);
  }, [quality, format]);

  const { getRootProps, getInputProps } = useDropzone({
    onDrop,
    accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.webp'] },
    maxFiles: 20,
  });

  // ...render
}

No server API routes needed. The entire pipeline — load → canvas → compress → zip — runs in the browser.

Recap

• Input: File objects from react-dropzone
• Processing: HTMLCanvasElement.toBlob() with format + quality control
• Batch: Sequential processing to keep memory flat
• Output: Individual download or ZIP via JSZip
• Server: None required

The live tool is at ultimatetools.io/tools/image-tools/image-compressor/. Try dropping 10 photos and downloading the ZIP — it's genuinely fast.

If you have questions about the Canvas API behaviour across browsers or the JSZip integration, drop them in the comments.