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

by

• Dylan Schiemann

摘要：

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

在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 项目为其做出贡献。

查看英文原文：Google Labs Announces Squoosh: Image Compression PWA