Image Shuttle

Image Shuttle

Free, Private & Browser-Based Image Compression

Compress and convert images between JPEG, PNG, WebP, and AVIF directly in your browser — no uploads, no servers.

About

Image Shuttle is a privacy-first image compression tool that processes everything entirely within your browser using the Canvas API and WebAssembly. Unlike traditional online compressors that upload your files to remote servers, Image Shuttle keeps your images on your device — making it safe for personal photos, confidential designs, and sensitive business assets.

The project is inspired by Google Chrome Labs' Squoosh but is built independently with Next.js and modern web standards for better SEO, deployment flexibility, and PWA support.

Key Features

• 100% Private: All processing happens client-side via Canvas API and WebAssembly. No file uploads to external servers.
• Four Formats: JPEG, PNG, WebP, and AVIF — compress within a format or convert between any of them.
• WebAssembly PNG Quantization: PNG compression uses libimagequant-wasm for 50-80% size reduction while preserving transparency.
• Batch Processing: Compress dozens of images in parallel using Web Workers (auto-tuned to your CPU core count).
• Before/After Comparison: Real-time visual comparison slider to verify quality before downloading.
• Offline-Capable PWA: Install to your home screen and compress images without an internet connection.
• Bilingual UI: Native English and Chinese interfaces with full SEO localization.

Tech Stack

• Framework: Next.js 16 (App Router) + React 19
• Language: TypeScript 5
• Styling: Tailwind CSS 4 + shadcn/ui primitives
• Image Processing:
  • Canvas API toBlob() for JPEG / WebP / AVIF
  • @fe-daily/libimagequant-wasm for PNG quantization
  • react-compare-slider for before/after visualization
• i18n: next-intl with URL-based routing (localePrefix: "as-needed")
• Theming: next-themes (System / Light / Dark)
• Toasts: Sonner
• Fonts: Geist + Geist Mono
• PWA: Custom Service Worker with offline precaching (including WASM modules)
• Deployment: Cloudflare Workers via OpenNext

Getting Started

Prerequisites

• Node.js 18.17 or later
• npm, yarn, or pnpm

Installation

1. Clone the repository

   git clone https://github.com/ShuttleLab/image-shuttle.git
   cd image-shuttle

2. Install dependencies

   npm install

   The postinstall script automatically copies the libimagequant WASM binary into public/wasm/.

3. Start the development server

   npm run dev

4. Open your browser Navigate to http://localhost:3000 to see the application running.

Available Scripts

Command	Description
npm run dev	Start the Next.js dev server
npm run build	Compile and type-check for production
npm run lint	Run ESLint
npm run preview	Build with OpenNext and run locally via Wrangler
npm run deploy	Build with OpenNext and deploy to Cloudflare Workers

Deployment

Image Shuttle is deployed on Cloudflare Workers using OpenNext.

npm run deploy

The Service Worker (public/sw.js) precaches the application shell, all Layer 4 tool pages, both locales, and the libimagequant WASM module — enabling full offline operation after the first visit.

Acknowledgments

Image Shuttle was inspired by Google Chrome Labs' Squoosh project, which pioneered the idea of high-quality client-side image compression. While Squoosh uses a custom Rollup build, Image Shuttle is an independent implementation built on Next.js for better SEO, multi-language support, and PWA deployment. No Squoosh source code is used in this project.

PNG quantization is provided by @fe-daily/libimagequant-wasm, a WebAssembly port of libimagequant.

License

This project is licensed under the MIT License — see the LICENSE file for details.

---

Built by ShuttleLab