$ show GoogleChromeLabs/squoosh
Squoosh is a client-side image compression web application that runs entirely in the browser. Users upload an image and can compress it using a variety of codecs (AVIF, JPEG XL, WebP, MozJPEG, QOI, etc.) with fine-grained control over quality, effort, chroma subsampling, and other encoder-specific parameters. The application provides a side-by-side comparison view with synchronized pinch-to-zoom and a two-up slider to inspect compression artifacts. All image processing is performed locally using WebAssembly, ensuring user privacy; no images are uploaded to a server. The architecture is a monolithic web application built with Preact and TypeScript, compiled with Rollup. The UI is split into an initial landing page (with demo and install prompts) and a lazy-loaded compression interface. Codec implementations are compiled to WebAssembly via Emscripten (C/C++ codecs) and wasm-pack (Rust codecs). Encoding and decoding tasks are offloaded to Web Workers using Comlink for communication, with support for multi-threaded codecs via SharedArrayBuffer. A service worker provides caching and offline PWA capabilities. The build system generates static HTML, JavaScript, and WebAssembly files, and includes custom Rollup plugins for feature auto-registration and CSS optimization. Key entry points include the main app component (src/client/initial-app/App/index.tsx), the compression workflow (src/client/lazy-app/Compress/index.tsx), the service worker (src/sw/index.ts), and the static site generator (src/static-build/index.tsx). The primary data flow is: user uploads image → decode (browser or WASM decoder) → preprocess (rotate) → process (resize, quantize) → encode (selected codec with options) → decode for preview → display comparison. Each phase can be aborted via AbortController. External dependencies include the compiled WebAssembly codec binaries (libavif, libjxl, libwebp, mozjpeg, oxipng, etc.), which are built using Docker and pinned source tarballs. Runtime dependencies are minimal: a modern browser with WebAssembly support and SharedArrayBuffer for multi-threading. The build toolchain requires Node.js, Emscripten, Rust/wasm-pack, and Docker.
The LLM identified 7 files worth highlighting for reuse:
Provides a generic bridge to Web Workers using Comlink for RPC-style communication. Supports automatic abort of in-flight operations via AbortController and idle timeout for resource cleanup. This pattern is reusable in any web application that needs to offload computation to workers with cancellation support.
Implements an LRU (Least Recently Used) cache for processed image results, keyed by input hash and encoder configuration. Avoids redundant re-encoding when the same image and settings are requested. The cache is self-contained and can be extracted for any expensive computation with deterministic outputs.
A custom HTML element that provides a side-by-side image comparison with a draggable slider. Uses CSS transforms and clipping for smooth performance. Demonstrates non-obvious skill in custom element design and can be reused in any project requiring before/after image comparison.
A custom HTML element that implements pinch-to-zoom and pan functionality using SVG matrix transformations. Supports synchronized zoom across multiple instances. This is a reusable component for any image viewer that needs touch-friendly zoom controls.
Provides utility functions (cleanSet, cleanMerge) for immutable updates to nested objects and arrays. Useful for state management in functional or reactive UIs. The implementation is concise and dependency-free, making it easy to extract into any JavaScript project.
Detects whether the runtime environment supports WebAssembly threads (SharedArrayBuffer and pthreads). Returns a boolean promise. This is a reusable utility for any WebAssembly-based application that wants to conditionally enable multi-threaded codecs.
A Rollup plugin that scans the src/features directory and auto-generates worker bridge modules and feature metadata. This pattern enables a declarative feature registration system and can be adapted for other build systems to automate worker code generation.