Compressly — zero-dependency client-side image compression.

Modern smartphone cameras take high-resolution photos ranging from 15MB to 25MB. Uploading these raw files creates severe network lag, triggers 413 Payload Too Large errors, runs up massive cloud transcoding bills (Cloudinary / AWS), or forces developers to show frustrating 'file size too large' validation toasts.

Compressly eliminates the cloud pipeline by compressing and downscaling images directly inside the user's browser in < 120ms before upload. By utilizing Web Workers and OffscreenCanvas, it keeps UI interactions running at a buttery-smooth 60 FPS without ever blocking the main thread.

import { compressImage } from "compressly";

// 1. Intercept user's file input client-side:
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const rawFile = event.target.files?.[0];
  if (!rawFile) return;

  // 2. Compress from 20MB -> ~250KB in < 120ms (Web Worker):
  const optimizedFile = await compressImage(rawFile, {
    maxWidth: 1920,
    quality: 0.82,
    targetSizeMB: 0.5, // Smart adaptive size loop
    useWorker: true,    // 60 FPS background thread
  });

  // 3. Upload 98% smaller payload to S3 / Backend:
  const formData = new FormData();
  formData.append("photo", optimizedFile);
  await fetch("/api/upload", { method: "POST", body: formData });
};

Compressly executes 100% on the client device. It requires zero server resources, incurs $0 in cloud transcoding fees, reduces network upload bandwidth by over 98%, and automatically fixes vertical iPhone photos flipping sideways via native EXIF orientation handling.