At the 2018 Google Chrome Developer Summit, Google announced Squoosh, an open source image compression Progressive Web App (PWA) that doubles as a practical demonstration of modern web technologies.
Squoosh provides a quick and easy mechanism for leveraging many image compression formats. Users may browse Squoosh.app, drag and drop an image into a browser tab, and experiment with many image optimization and conversion settings. The app displays before and after views side by side for the selected image compression settings.
Squoosh in its current form is likely not meant as a competitor to the numerous image compression apps, ranging from traditional image editing tools as Photoshop and Sketch.app to web-based services like TinyPNG, ImageResize.org, and Compressor.io, to various desktop apps.
Google Labs' primary objective with Squoosh is to demonstrate how advanced web apps can leverage modern technologies to deliver a high-performance experience in today's web browsers.
Squoosh leverages numerous technologies to deliver a solid experience:
- Node.js - server-side and command-line JavaScript (see InfoQ's Node.js coverage)
- Preact - smaller alternative to React, for its reactive, client-side JavaScript framework
- SASS - CSS preprocessor
- Typed CSS Modules - Accuracy of using CSS classes within components, a technique used by Dojo and others
- TypeScript - interfaces and type safety, which is especially crucial for managing numerous image optimization formats (see InfoQ's TypeScript coverage)
- WebAssembly - various image compression codecs (see InfoQ's WebAssembly coverage)
- webpack - build and bundle optimization (see InfoQ's webpack 4 release coverage)
Squoosh follows many modern patterns, including:
- async/await
- Canvas for image drawing
- Decorators (currently the early draft version supported by TypeScript
- meta, popularized by Dojo and others, for making a variety of properties available in a reactive architecture
- Progressive Web Apps and service workers for offline usage
- Reactive, virtual DOM architecture with JSX, popularized by React
Squoosh supported a variety of image compression formats including BMP, GIF, JP2, JPEG, MozJPEG, PDF, PNG, TIFF, and WebP. Support for image compression varies by browser. For example, Firefox supports encoding to BMP, and Safari defers encoding to the OS and supports more formats, whereas Chrome natively supports fewer formats. WebAssembly gets used by Squoosh for working with some image codecs not included in various browsers, and for the eonciding and decoding process.
Squoosh is available under the Apache 2 open source license. Contributions are welcome via the Squoosh GitHub project and should follow the Squoosh contribution guidelines.