$ account GoogleChromeLabs
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.