谷歌实验室发布图片压缩 PWA：Squoosh

在2018 Google Chrome开发者峰会上，Google 发布了Squoosh，这是一个开源的图片压缩渐进式 Web 应用（PWA），它同时也是现代 Web 技术的一个实际展示。

Squoosh 提供了一种快捷和简易的机制，能够实现多种格式的图片压缩。用户可以直接浏览 Squoosh.app，将图片拖放至浏览器的 Tab 标签中，然后能够尝试多种图片优化和转换的设置。这个应用会在屏幕的两侧分别展现按照选定的压缩配置在压缩前和压缩后的图片视图。

就目前来看，Squoosh 不会成为众多图片压缩应用的竞争者，这种应用包括传统的图片编辑工具，如 Photoshop 和 Sketch.app，以及基于 Web 的服务，如TinyPNG、ImageResize.org和Compressor.io，还包括各种桌面应用。

谷歌实验室发布 Squoosh 的主要目标是演示高级 web 应用程序如何利用现代技术在 web 浏览器中提供高性能的体验。

Squoosh 使用了多项技术来交付可靠的用户体验：

• Node.js：服务端和命令行中的 JavaScript（参见InfoQ上对Node.js的介绍）；

• Preact：React 技术的替代方案，它的体量更小，是反应式、客户端框架；

• SASS：CSS 预处理器；

• 类型化的CSS模块（Typed CSS Modules）：提供了在组件中使用 CSS 类的精确性，该技术被 Dojo 和其他框架所采用；

• TypeScript：提供了接口和类型的安全性，这对于管理数量众多的图片优化格式至关重要（参见InfoQ对TypeScript的介绍）；

• WebAssembly：各种图片压缩的解编码器（参见InfoQ对WebAssembly的介绍）；

• webpack：构建和打包功能的优化（参见InfoQ对webpack 4发布的介绍）。

Squoosh 遵循了很多现代化的模式，包括：

• async/await；

• 使用 Canvas 进行图片绘制；

• Decorators（目前早期草案版本得到了 TypeScript 的支持）；

• meta，目前由 Dojo 和其他组织在推广，在反应式架构中，能够提供各种属性；

• 可离线使用的渐进式Web应用（PWA）和 service worker；

• 使用 JSX 的反应式、虚拟 DOM 架构，由 React 在推广支持。

Squoosh 支持各种图像压缩格式，包括 BMP、GIF、JP2、JPEG、MozJPEG、PDF、PNG、TIFF 和 WebP。对图像压缩的支持因浏览器而异。例如，Firefox 支持对 BMP 进行编码，Safari 将编码功能委托给操作系统实现并且支持更多的格式，而 Chrome 本身支持的格式更少一些。Squoosh 使用 WebAssembly 来处理不同浏览器中不包含某些图像编解码器的场景，并用其执行编码和解码过程。

Squoosh 可以在 Apache 2 开源许可证下获取。谷歌鼓励开发者在遵循Squoosh贡献指南的前提下，通过Squoosh GitHub 项目为其做出贡献。

英文原文

https://www.infoq.com/news/2018/11/google-squoosh-pwa-webassembly