CompressWave

🌊 Powerful file compression library that runs entirely in the browser

A TypeScript/JavaScript library for client-side video and image compression with no server dependencies. Built with FFmpeg.wasm and modern web technologies.

Features

• 🎥 Video Compression - Powered by FFmpeg.wasm
• 🖼️ Image Optimization - Smart compression with format conversion
• 🔒 Privacy First - 100% client-side processing
• ⚡ High Performance - WebAssembly and Web Workers
• 📦 Zero Dependencies - No server required
• 🎨 TypeScript Support - Full type definitions included

Installation

npm install compresswave

Quick Start

Video Compression

import { VideoCompressor } from 'compresswave';

const compressor = new VideoCompressor({
  preset: 'web',
  onProgress: (progress) => console.log(`${progress}% complete`),
  onComplete: (result) => console.log('Compressed:', result)
});

const compressedVideo = await compressor.compress(videoFile);

Image Optimization

import { ImageOptimizer } from 'compresswave';

const optimizer = new ImageOptimizer({
  quality: 0.8,
  maxWidth: 1920,
  format: 'auto'
});

const optimizedImage = await optimizer.process(imageFile);

Batch Processing

import { BatchProcessor } from 'compresswave';

const processor = new BatchProcessor({
  concurrency: 2,
  onFileComplete: (file, result) => {
    console.log(`${file.name} compressed: ${result.compressionRatio}%`);
  }
});

const results = await processor.compressFiles(fileList);

API Reference

VideoCompressor

const compressor = new VideoCompressor(options: VideoCompressionOptions);

Options:

• preset: 'web' | 'mobile' | 'social' | 'email' | 'custom'
• codec: 'h264' | 'h265' | 'vp8' | 'vp9' | 'av1'
• crf: Quality factor (0-51, lower = better quality)
• resolution: { width: number, height: number }
• audio: Audio compression settings
• onProgress: Progress callback function
• onComplete: Completion callback function

ImageOptimizer

const optimizer = new ImageOptimizer(options: ImageOptimizationOptions);

Options:

• quality: Image quality (0-1)
• maxWidth: Maximum width in pixels
• maxHeight: Maximum height in pixels
• format: 'auto' | 'jpeg' | 'png' | 'webp' | 'avif'
• progressive: Enable progressive JPEG
• preserveExif: Preserve EXIF metadata

BatchProcessor

const processor = new BatchProcessor(options: BatchProcessingOptions);

Options:

• concurrency: Number of files to process simultaneously
• onFileStart: Called when file processing starts
• onFileComplete: Called when file processing completes
• onFileError: Called when file processing fails
• onAllComplete: Called when all files are processed

Compression Presets

| Preset | Resolution | Quality | Use Case | |--------|------------|---------|----------| | web | 720p | High | Websites, streaming | | mobile | 480p | Medium | Mobile devices | | social | 1080x1080 | Medium | Social media | | email | 360p | Low | Email attachments |

Browser Compatibility

• Chrome 67+
• Firefox 62+
• Safari 13.1+
• Edge 79+

Requires support for:

• WebAssembly
• SharedArrayBuffer (for optimal performance)
• Web Workers

Examples

Custom Video Settings

const compressor = new VideoCompressor({
  codec: 'h264',
  crf: 23,
  preset: 'medium',
  audio: {
    codec: 'aac',
    bitrate: '128k'
  },
  video: {
    bitrate: '1000k',
    framerate: 30,
    resolution: { width: 1280, height: 720 }
  }
});

Image Format Conversion

const optimizer = new ImageOptimizer();

// Convert to WebP
const webpImage = await optimizer.convertFormat(file, 'webp');

// Resize image
const resizedImage = await optimizer.resize(file, 800, 600);

Progress Tracking

const compressor = new VideoCompressor({
  onProgress: (progress) => {
    document.getElementById('progress').value = progress;
  },
  onComplete: (result) => {
    console.log(`Saved ${result.compressionRatio}% space`);
    console.log(`Processing took ${result.processingTime}ms`);
  }
});

License

MIT © Shaswat Raj

Contributing

Contributions are welcome! Please see our Contributing Guide.

Links

• GitHub Repository
• Documentation
• Live Demo
• NPM Package