# SnapWap: Browser-Based WebAssembly Image Optimizer

> SnapWap is an open-source, client-side web application for image compression, format conversion, and visual optimization. All encoding runs locally in the user's browser using WebAssembly (WASM) codecs compiled from Google's Squoosh. Zero server uploads occur.

## Core Characteristics

- **Privacy-First Architecture**: 100% client-side execution using HTML5 Canvas and Web Workers. No image data is transmitted to external servers.
- **License**: GPL-3.0-or-later (open source).
- **Core Technology**: WebAssembly (WASM), Next.js 16 App Router, React 19, TypeScript, Web Workers, Tailwind CSS v4.

## Supported Formats & Codecs

1. **MozJPEG (`image/jpeg`)**:
   - WebAssembly build of MozJPEG.
   - Features: Quality control (1-100), progressive scanning, trellis quantization, baseline mode, coding optimization, chroma subsampling (4:4:4, 4:2:0, 4:2:2).
2. **WebP (`image/webp`)**:
   - WebAssembly build of libwebp.
   - Features: Lossy & lossless encoding, quality (1-100), effort/method (0-6), SharpYUV conversion, spatial noise shaping (SNS), filter strength.
3. **AVIF (`image/avif`)**:
   - WebAssembly build of libavif with the libaom encoder. (Not rav1e - Squoosh's AVIF encoder is libaom.)
   - Features: Constant quality cqLevel (0 lossless to 63), speed/effort (0-10), SharpYUV, tile rows/cols, subsampling (4:4:4, 4:2:0).
4. **JPEG XL (`image/jxl`)**:
   - WebAssembly build of libjxl.
   - Features: Butteraugli distance (0 lossless to 15), effort (1-9), lossless toggle.
   - Caveat: JPEG XL encodes correctly and downloads as a valid `.jxl`, but Chrome and Firefox cannot *display* it, so the in-app preview shows an "unavailable" panel instead. Only Safari 17+ can render it. Encoding also fails on very large images (~29 megapixels).
5. **PNG (`image/png`)**:
   - WebAssembly PNG optimizer (Rust).
   - Features: Optimization levels (0-6), Adam7 interlacing.
6. **SVG (`image/svg+xml`)**:
   - Client-side XML minification.
   - Features: Comment stripping, metadata removal, whitespace cleanup.
7. **Color Quantization (Palettization)**:
   - WebAssembly build of libimagequant (GPL-3.0-or-later). This is the default and the only engine that currently ships; it is why SnapWap itself is licensed GPL-3.0-or-later.
   - A permissively licensed alternative (Quantette) exists in the repository as an uncompiled draft and is disabled at runtime. There is also a plain-JS `native` fallback.
   - Features: 8-bit palette reduction (2 to 256 colors), adjustable dithering (0.0 to 1.0).

## Key Features

- **Dual-Lane Encoding Pipeline**: Executes a fast, low-resolution preview lane for instantaneous visual feedback, followed by asynchronous final-quality encoding.
- **Side-by-Side A/B Visual Comparison**: Interactive side-by-side comparison slider (Side A vs Side B) with visual difference overlays (delta and heatmap modes).
- **Target File Size Search**: Automatic step-search algorithm tuning codec quality parameters to achieve a specified byte size constraint.
- **Preprocessing & Resampling**: Lanczos3, Catmull-Rom, Mitchell, Triangle, Hqx, Bicubic, Bilinear, and Nearest-neighbor resampling algorithms; image adjustments (brightness, contrast, saturation, sharpen, blur, grayscale, sepia, invert, rotation, flip, metadata stripping).
- **Batch Processing**: Sequenced multi-file queue processing.

## Capabilities & Limitations

### Capabilities
- Zero telemetry or image data tracking.
- Immediate visual feedback with full control over encoder internals.
- Accurate byte-level compression reports.

### Limitations
- Processing speed and memory capacity are strictly bound to the client device's CPU and browser WebAssembly memory caps.
- Sequential worker execution model (single worker bridge queue with task cancellation).

## Documentation

- [How It Works](https://snapwap.vercel.app/how-it-works): Comprehensive pipeline architecture, WebAssembly execution, and codec comparison matrix.
- [Frequently Asked Questions](https://snapwap.vercel.app/faq): Privacy guarantees, format comparisons, quantization science, and batch processing FAQs.
- [Full Technical Specification](https://snapwap.vercel.app/llms-full.txt): Comprehensive technical architecture, WebAssembly codecs, and pipeline specs.

## Optional

- [Source Repository](https://github.com/lakshayagarwal50/snapwap): SnapWap open-source GitHub repository.
- [Image Optimizer](https://snapwap.vercel.app/): The application itself. A stateful, client-side workspace — there is no server-rendered result to read, so the pages above describe what it does.