Squish

Batch Browser-based Image Compression

A modern, browser-based image compression tool that leverages WebAssembly for high-performance image optimization. Squish supports multiple formats and provides an intuitive interface for compressing your images without compromising quality.

Features

• Support for multiple image formats:
  • AVIF (AV1 Image Format)
  • JPEG (using MozJPEG)
  • JPEG XL
  • PNG (using OxiPNG)
  • WebP
• Key capabilities:
  • Browser-based compression (no server uploads needed)
  • Batch processing support
  • Format conversion
  • Quality adjustment per format
  • Real-time preview
  • Size reduction statistics
  • Drag and drop interface
  • Smart queue for compressing large number of files

Technology

Squish is built with modern web technologies:

• React + TypeScript for the UI
• Vite for blazing fast development
• WebAssembly for native-speed image processing
• Tailwind CSS for styling
• jSquash for image codec implementations

Getting Started

Prerequisites

• Node.js 18 or later
• npm 7 or later

Installation

1. Clone the repository:

git clone https://github.com/addyosmani/squish.git
cd squish

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Build for production:

npm run build

Usage

1. Drop or Select Images: Drag and drop images onto the upload area or click to select files
2. Choose Output Format: Select your desired output format (AVIF, JPEG, JPEG XL, PNG, or WebP)
3. Adjust Quality: Use the quality slider to balance between file size and image quality
4. Download: Download individual images or use the “Download All” button for batch downloads

Default Quality Settings

• AVIF: 50%
• JPEG: 75%
• JPEG XL: 75%
• PNG: Lossless
• WebP: 75%

Acknowledgments

• jSquash for the WebAssembly image codecs
• MozJPEG for JPEG compression
• libavif for AVIF support
• libjxl for JPEG XL support
• Oxipng for PNG optimization