How googlechromelabs/squoosh works
Squoosh is a browser-based image compression and comparison app: users open or drop an image, optionally rotate/resize/quantize it, choose output encoders and settings, compare results, then save locally. Codec work runs through worker-facing feature modules and WebAssembly/native codec implementations; the README emphasizes that images remain on-device. The graph preserves documented codec families and PWA caching, but many feature-to-codec dispatches are unsampled, so those links are marked unverified rather than presented as observed calls.
Main entry points: Compress/index.tsx Compression workspace · index.ts Worker bridge · Intro/index.tsx Intro and file intake · encoders Codec feature adapters
Components 18
User experience
- Intro and file intake
src/shared/prerendered-app/Intro/index.tsx - Compression workspace
src/client/lazy-app/Compress/index.tsx - Encoder options
src/client/lazy-app/Compress/Options/index.tsx - Image comparison
src/client/lazy-app/Compress/Output/index.tsx - Compression results
src/client/lazy-app/Compress/Results/index.tsx - Result cache
src/client/lazy-app/Compress/result-cache.ts - Landing page
src/static-build/pages/index/index.tsx
Image processing
- Worker bridge
src/client/lazy-app/worker-bridge/index.ts - Rotate preprocessing
src/features/preprocessors/rotate/worker/rotate.ts - Resize processing
src/features/processors/resize/worker/resize.ts - Palette quantization
src/features/processors/quantize/worker/quantize.ts - Codec feature adapters
src/features/encoders
Codec runtime
- Codec implementations
codecs - Image decoders
src/features/decoders
PWA delivery
- Service worker
src/sw/index.ts - Dynamic cache policy
src/sw/to-cache.ts - Static app and manifest
src/static-build/index.tsx
Other components
- Image user
Connections 15
- Image user → Intro and file intake: opens image
src/shared/prerendered-app/Intro/index.tsx - Intro and file intake → Compression workspace: selects image
- Compression workspace → Encoder options: renders settings
src/client/lazy-app/Compress/index.tsx - Compression workspace → Image comparison: renders comparison
src/client/lazy-app/Compress/index.tsx - Compression workspace → Compression results: renders results
src/client/lazy-app/Compress/index.tsx - Compression workspace → Result cache: uses cache
src/client/lazy-app/Compress/index.tsx - Compression workspace → Worker bridge: dispatches work
src/client/lazy-app/Compress/index.tsx - Worker bridge → Rotate preprocessing: runs rotation
- Worker bridge → Resize processing: runs resize
- Worker bridge → Palette quantization: runs quantization
- Worker bridge → Image decoders: runs decoding
- Worker bridge → Codec feature adapters: runs encoding
- Codec feature adapters → Codec implementations: uses codecs
- Service worker → Dynamic cache policy: checks cache policy
src/sw/index.ts - Static app and manifest → Landing page: renders page
src/static-build/index.tsx