Skip to main content

In-Browser Image Compressor

Compress JPEG, WebP, and PNG files in your browser with real-time file size calculations, visual quality controls, and zero cloud uploads.

Compress Image

This app makes a real-time call to the ShrinkItPlease API.

Drag & drop an image or click to select

Result

Technical Architecture: Reverse-Engineering In-Browser Image Compression​

Web performance and Core Web Vitals (Largest Contentful Paint - LCP) depend heavily on served image weight. The compressor combines client-side HTML5 canvas quantization with our dedicated sovereign microservice architecture.

1. Client-Side Canvas Quantization & WebP Transcoding​

Modern browsers natively implement highly optimized image encoders via HTMLCanvasElement.toBlob(). By decoding an image onto an offscreen canvas and re-encoding it with variable lossy compression flags, files can be shrunk by 60% to 90% without visible degradation:

async function compressImageInBrowser(
  file: File,
  quality: number = 0.8,
  outputFormat: 'image/webp' | 'image/jpeg' = 'image/webp'
): Promise<{ blob: Blob; ratio: number }> {
  // Decode file into HTMLImageElement
  const img = new Image();
  img.src = URL.createObjectURL(file);
  await img.decode();

  // Create canvas matched to native image dimensions
  const canvas = document.createElement('canvas');
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;

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

  // Free initial blob URL
  URL.revokeObjectURL(img.src);

  // Encode with native browser quantization
  return new Promise((resolve, reject) => {
    canvas.toBlob(
      (blob) => {
        if (!blob) return reject(new Error('Compression failed'));
        const savingsRatio = ((file.size - blob.size) / file.size) * 100;
        resolve({ blob, ratio: Math.max(0, savingsRatio) });
      },
      outputFormat,
      quality
    );
  });
}

2. Sovereign Microservice API & Automation​

In addition to the interactive browser utility, automated continuous integration pipelines, headless web scrapers, and batch asset workflows can utilize our dedicated cloud compression service:

  • API Base URL: https://shrinkitplease.hrekov.com
  • Interactive Documentation: https://shrinkitplease.hrekov.com/docs
# Compress an image via cURL using the sovereign microservice
curl -X POST "https://shrinkitplease.hrekov.com/api/compress" \
  -F "file=@photo.png" \
  -F "quality=80" \
  -F "format=webp" \
  --output "photo_optimized.webp"

Image Format & Compression Characteristics​

Target FormatCompression AlgorithmTypical ReductionTransparency SupportBrowser Compatibility
WebPVP8 lossy / VP8L lossless65% - 85%Yes (Alpha channel)97.4% (All modern browsers)
JPEGDCT discrete cosine transform50% - 75%No100% universal legacy
PNG (Quantized)Deflate / 8-bit color palette40% - 60%Yes (Indexed & full alpha)100% universal legacy
AVIFAV1 intra-frame coding75% - 90%Yes (High bit-depth HDR)Modern Evergreen browsers

Client-Side Security & Zero-Server Data Isolation​

  • Local In-Memory Pipeline: When using the interactive web tool, all decoding, canvas resampling, and blob serialization happen locally within your browser tab. No confidential photos or proprietary designs are uploaded or stored.
  • Zero Telemetry on Images: Image dimensions, filenames, and byte content remain completely private and isolated from external analytics scripts.
  • Immediate Heap Cleanliness: Canvas buffers and temporary Object URLs are reclaimed after download triggers, preventing browser tab crashes during high-volume batch runs.

Get notified about updates to this tool

No spam. Just high-quality updates about new features and guides.

Last updated on