🗜️ SqueezJS

Lightweight, instant image compression for the modern web.

SqueezJS is a zero-dependency JavaScript library that resizes and converts images to optimized JPEG format — right in the browser. No servers. No uploads. No bloat. Just squeeze.

✨ Why SqueezJS?

• ⚡ Instant output — compression happens client-side with zero network round-trips
• 🪶 Featherweight — no dependencies, no build step, just drop it in
• 🖼️ Smart resizing — preserves aspect ratio and never upscales
• 🎛️ Fully configurable — control quality and maximum dimensions
• 🔒 Privacy-first — images never leave the user's device
• 🌐 Works everywhere — any modern browser with Canvas support

📦 Installation

npm install squeezjs

Or grab the source directly and import it:

import FileCompressor from "./compressor";

🚀 Quick Start

import FileCompressor from "squeezjs";

// Create a compressor with default settings
const compressor = new FileCompressor();

// Compress an image file
const input = document.querySelector('input[type="file"]');

input.addEventListener("change", async (event) => {
  const file = event.target.files[0];
  const compressed = await compressor.compress(file);

  // Use the compressed File however you like
  const url = URL.createObjectURL(compressed);
  document.querySelector("img").src = url;
});

⚙️ Configuration

Customize the compressor by passing options to the constructor:

const compressor = new FileCompressor({
  quality: 0.8, // JPEG quality (0 to 1) — default: 0.7
  width: 1280, // Max output width in px — default: 1920
  height: 1280, // Max output height in px — default: 1920
});

| Option | Type | Default | Description | | --------- | ------ | ------- | --------------------------------- | | quality | number | 0.7 | JPEG compression quality (0 to 1) | | width | number | 1920 | Maximum output width in pixels | | height | number | 1920 | Maximum output height in pixels |

Note: Images smaller than the maximum dimensions are never upscaled — SqueezJS only shrinks.

🧠 API

new FileCompressor(options?)

Creates a new compressor instance.

| Parameter | Type | Description | | --------- | ------ | ---------------------------------- | | options | object | Optional configuration (see above) |

compress(file) → Promise<File>

Compresses an image file and returns a new JPEG File object.

| Parameter | Type | Description | | --------- | ------ | -------------------------- | | file | File | The image file to compress |

Returns: Promise<File> — a compressed JPEG file.

🧪 Example

import FileCompressor from "squeezjs";

const compressor = new FileCompressor({ quality: 0.6, width: 1024 });

const file = await compressor.compress(myImageFile);
console.log(`Original: ${myImageFile.size} bytes`);
console.log(`Compressed: ${file.size} bytes`);

🛠️ How It Works

1. Load — the image is loaded into memory via an object URL
2. Measure — dimensions are calculated to fit within your max bounds while preserving aspect ratio
3. Draw — the image is redrawn onto an off-screen canvas at the new size
4. Encode — the canvas is exported as a JPEG blob at your chosen quality
5. Deliver — a fresh File object is returned, ready to upload or display

🤝 Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.

Made with ❤️ by Mashrafi Mahin