Client-Side PDF & Image Compression SDK
@fileslim/compress — JavaScript / TypeScript library for browser-based PDF and image compression.
WebAssembly under the hood. AVIF, WebP, JPEG, PNG, PDF. MIT licensed. Zero servers, zero API keys, complete privacy.
100% Client-Side
All compression happens in the browser. Files never leave the user's device.
Zero Server Costs
No backend required. Scale to millions of users without infrastructure costs.
TypeScript Ready
Full TypeScript support with comprehensive type definitions included.
Modern Formats
Support for AVIF, WebP, JPEG, PNG, and Best Algorithm candidate selection.
Image Compression
Worker-pool Best Algorithm mode tests candidate codecs and keeps the smallest quality-safe result.
PDF Optimization
Full image extraction and recompression pipeline with progress tracking.
Quality Scoring
Measure compression quality with SSIM and enforce a minimum quality threshold.
Try It Live
Upload an image and see the SDK in action. All processing happens in your browser — no uploads to any server.
Why Client-Side PDF & Image Compression?
Server-side compression services charge per file, leak user data through uploads, and add network latency. @fileslim/compress moves the entire pipeline into the browser using WebAssembly — three concrete advantages for product teams:
Privacy by default
Files never leave the user's device. No upload, no third-party processor, no data-processing agreement to sign. Drop-in compliance for GDPR, HIPAA, and internal data-residency rules.
Zero server cost
WebAssembly runs on the client's CPU. No Lambda invocations, no per-MB pricing, no rate limiting. Scaling to a million users costs the same as scaling to ten — your CDN bill, and nothing else.
Lower latency, offline-ready
Skip the upload + download roundtrip. A 20 MB PDF that takes 30 seconds to upload over mobile compresses locally in 5 seconds. Works inside service workers and PWAs with no network.
Server-side vs. client-side compression
| Concern | Server-side (Ghostscript / SaaS) | @fileslim/compress (client-side) |
|---|---|---|
| User privacy | File uploaded to backend | Never leaves the browser |
| Cost per file | Pay per request or per MB | Free — runs on the user's CPU |
| Cold-start latency | Network upload + queue + download | ~50 ms WASM init, then local |
| Max practical file size | Often capped at 25–100 MB | Tested up to 200 MB on modern devices |
| Offline support | None — requires network | Works in service workers / PWAs |
| Vendor lock-in | API key + SaaS billing | MIT licensed, npm package |
Installation
npm install @fileslim/compressOptional: Install WASM encoders for better compression
For Best Algorithm mode and optimal AVIF, WebP, JPEG, and PNG output, install the optional @jsquash encoders:
npm install @jsquash/jpeg @jsquash/png @jsquash/webp @jsquash/avif @jsquash/oxipngQuick Start
Image Compression
import { compress } from '@fileslim/compress';
const result = await compress(file, {
mode: 'best',
quality: 0.8,
maxWidth: 1920,
format: 'auto',
measureQuality: true,
minSSIM: 0.9
});
console.log('Saved:', result.savings + '%');
console.log('SSIM:', result.qualityScore?.ssim);
// → 0.97 (excellent)PDF Compression
import { compressPDF } from '@fileslim/compress';
const result = await compressPDF(file, {
mode: 'balanced',
imageQuality: 0.7,
onProgress: (stage, pct) => {
console.log(`${stage}: ${pct}%`);
}
});
// Download the result
const url = URL.createObjectURL(result.blob);
const a = document.createElement('a');
a.href = url;
a.download = result.filename;
a.click();Batch Compression
import { compressBatch } from '@fileslim/compress';
const files = Array.from(input.files);
const { results, errors } = await compressBatch(files, {
preset: 'web',
onProgress: (current, total) => {
console.log(`${current}/${total} files processed`);
}
});
// Process results
results.forEach(result => {
console.log(`${result.filename}: saved ${result.savings}%`);
});Compression Profiles
| Preset | Quality | Max Width | Format | Best For |
|---|---|---|---|---|
web | 75% | 1920px | Auto (AVIF/WebP) | Websites |
social | 80% | 1080px | JPEG | Instagram, Twitter |
email | 65% | 800px | JPEG | Email attachments |
print | 95% | No limit | Auto (AVIF/WebP) | Printing |
Browser Compatibility
| Browser | AVIF | WebP | JPEG | PNG | Min Version |
|---|---|---|---|---|---|
| Chrome | ✓ (89+) | ✓ | ✓ | ✓ | 89+ |
| Firefox | ✓ (93+) | ✓ | ✓ | ✓ | 93+ |
| Safari | ✓ (16.4+) | ✓ | ✓ | ✓ | 16+ |
| Edge | ✓ (89+) | ✓ | ✓ | ✓ | 89+ |
How It Works
Install
npm install @fileslim/compressImport
import { compress } from '@fileslim/compress'Compress
const result = await compress(file)Supported File Types
| Format | Type | Compression Method |
|---|---|---|
| JPEG | Image | Lossy recompression with quality control |
| PNG | Image | Lossless OxiPNG optimization |
| WebP | Image | Lossy/lossless with format conversion |
| AVIF | Image | Next-gen lossy with automatic fallback |
| GIF | Image | Palette optimization and frame dedup |
| SVG | Image | XML minification and path optimization |
| Document | Embedded image extraction and recompression |
Frequently Asked Questions
How do I compress a PDF in the browser with JavaScript?
Install @fileslim/compress from npm, then call await compress(file) on a PDF File object. The SDK extracts embedded images, recompresses them via WebAssembly, and rebuilds the PDF — entirely in the browser, no server upload.
What's the difference between server-side and client-side PDF compression?
Server-side compression uploads to a backend (Ghostscript or a SaaS API), processes remotely, and downloads the result — slower, costs per file, and exposes user data. Client-side compression runs in the user's browser via WebAssembly with no upload, no API key, and no per-file pricing.
Can I use this SDK with React, Next.js, Vue, or Angular?
Yes — the SDK is framework-agnostic. Import it into React, Next.js client components, Vue 3, Angular, Svelte, or vanilla JavaScript. ESM and CJS bundles are provided, with full TypeScript definitions.
Does the SDK work in a Web Worker?
Yes. Best Algorithm mode already runs encoders inside a worker pool internally, and you can also import compress() into your own Web Worker to keep the main thread responsive on large batches.
How do I configure compression quality programmatically?
Pass an options object: compress(file, { quality: 0.8, maxWidth: 1920, format: 'webp', removeMetadata: true }). Or use a built-in preset: compress(file, { preset: 'web' | 'social' | 'email' | 'print' }).
Does it support TypeScript types out of the box?
Yes. The package ships with full .d.ts declarations — every option, return value, and preset is typed. No @types/* package required.
Is the SDK free to use?
Yes — completely free and open source under the MIT license. Use it in personal and commercial projects without fees, attribution, or restrictions.
What is the maximum file size supported?
No hard cap. The SDK chunks files and uses Web Workers to keep the browser responsive. In practice, images up to 50 MP and PDFs up to 200 MB work well on modern devices — performance scales with the user's CPU and memory.
Does it work in all browsers?
Modern browsers: Chrome 89+, Firefox 93+, Safari 16+, Edge 89+. AVIF requires newer versions; the SDK automatically falls back to WebP or JPEG on older browsers.
Ready to Get Started?
Add client-side compression to your app in minutes. No API keys, no server costs, just fast, private file compression.