CompressNeo
Developer Sandbox

Developer Guide & Client-Side API

CompressNeo runs entirely client-side. Rather than offering a paid server-side API, here is the complete code tutorial to implement browser-based compression in your own web apps.

Drag & drop files here, or click to browse

Supports PNG, JPG, WebP, AVIF, SVG, and GIF (static). Fully secure, runs 100% locally.

Global Presets

Set compression profile for all queued files.

Quality level 80%
Max Compress Balanced Max Quality
ℹ️
Local-First Execution: CompressNeo does not provide a REST API or upload-based webhooks. All operations run 100% inside the user's browser via Web Workers and canvas APIs. This tutorial is provided to help developers implement the exact same client-side compression techniques in their own applications.

Implementing Browser Image Compression

Modern web browsers can compress and resize image files directly on the client using HTML5 Canvas APIs, significantly reducing bandwidth and server processing costs.

Method 1: Standard HTML5 Canvas

For simple single-file tasks, load the image onto a Canvas element and output a compressed Blob using `toBlob(callback, format, quality)`:

javascript 
// Load file as an Image element
function compressImage(file, format = 'image/jpeg', quality = 0.8) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = (e) => {
      const img = new Image();
      img.src = e.target.result;
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        
        const ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        
        canvas.toBlob((blob) => {
          resolve(blob);
        }, format, quality);
      };
      img.onerror = reject;
    };
    reader.onerror = reject;
  });
}

Method 2: OffscreenCanvas inside Web Workers

For batch processing, perform canvas rendering off-thread using `OffscreenCanvas` to prevent blocking the browser layout. Check support and convert:

javascript 
// Inside your Web Worker context
self.onmessage = async (e) => {
  const { fileBlob, format, quality } = e.data;
  
  // Decode image to bitmap offscreen
  const bitmap = await self.createImageBitmap(fileBlob);
  const canvas = new OffscreenCanvas(bitmap.width, bitmap.height);
  const ctx = canvas.getContext('2d');
  
  ctx.drawImage(bitmap, 0, 0);
  bitmap.close(); // clean graphic card memory
  
  // Compress and compile to blob
  const compressedBlob = await canvas.convertToBlob({
    type: format, // 'image/webp' | 'image/jpeg' | 'image/avif'
    quality: quality // float 0.0 to 1.0
  });

  const arrayBuffer = await compressedBlob.arrayBuffer();
  self.postMessage({ buffer: arrayBuffer }, [arrayBuffer]); // transferable buffer
};