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