Squoosh v2 发布

新增了编解码器支持、更新后的设计和 CLI 支持!

小阪马里子

Squoosh 是我们的团队构建的图片压缩应用,在 2018 年 Chrome 开发者峰会上首次亮相。我们构建它是为了让您轻松尝试不同的图像编解码器并展示现代网络的功能。

今天,我们将发布应用的主要更新,其中包含更多编解码器支持、全新设计,以及一种在名为 Squoosh CLI 的命令行中使用 Squoosh 的新方式。

新增了编解码器支持

除了浏览器原生支持的编解码器以外,我们现在还支持 OxiPNG、MozJPEG、WebP 和 AVIF。通过使用 WebAssembly,我们再次开发了新的编解码器。通过以 WebAssembly 模块的形式编译编解码器和解码器,用户可以访问和试验较新的编解码器,即使其首选浏览器不支持这些编解码器。

启动命令行 Squoosh!

自 2018 年最初发布以来,常见的用户请求是在没有界面的情况下以编程方式与 Squoosh 互动。我们对此路径感到有点冲突,因为我们的应用是一个基于命令行的编解码器工具的界面。不过,我们理解想要与整个编解码器套件(而不是多个工具)进行交互。Squoosh CLI 可以做到这一点。

您可以通过运行 npm i @squoosh/cli 来安装 Beta 版 Squoosh CLI,也可以直接使用 npx @squoosh/cli [parameters] 运行它。

Squoosh CLI 采用 Node 编写,使用与 PWA 使用的 WebAssembly 模块完全相同的 WebAssembly 模块。通过广泛使用 worker,所有图片都会并行进行解码、处理和编码。 我们还使用 Rollup 将所有内容捆绑到一个 JavaScript 文件中,以确保通过 npx 进行快速无缝安装。CLI 还提供自动压缩功能,它会尝试在不降低视觉保真度的情况下尽可能降低图片质量(使用 Butteraugli 指标)。

借助 Squoosh CLI,您可以将 Web 应用中的图片压缩为多种格式,并使用 <picture> 元素让浏览器选择最佳版本。我们还计划为 Webpack、Rollup 和其他构建工具构建插件,使图片压缩自动成为构建流程的一部分。

构建流程从 Webpack 更改为 Rollup

构建 Squoosh 的同一支团队今年花了大量时间研究工具报告的构建工具,并决定将我们的构建流程从 Webpack 切换到 Rollup。

这个项目最初是通过 Webpack 启动的,因为我们想以团队形式尝试这个项目。截至 2018 年,Webpack 是唯一可让我们充分控制项目设置的工具。随着时间的推移,我们发现 Rollup 的插件系统简单易行,以及 ESM 的简洁性使得这个项目自然而然地成为了这个项目的选择。

更新后的界面设计

我们还更新了应用的界面设计,将 blobs 作为视觉元素。关于我们如何处理代码中的数据,是一条双关语。Squoosh 以 blob 的形式传递图像数据,因此在设计中包含一些 blob 感觉很自然(明白了吗?)。

颜色的使用也经过了打磨,因此颜色不仅仅是一种强调色,也是一种矢量,用于区分和强调选项上下文中的哪张图片。总之,首页更加鲜明,而工具本身更清晰简洁。

接下来做什么?

我们计划继续开发 Squoosh。随着新映像格式的发布,我们希望用户拥有一个地方,让他们能够轻松地使用编解码器。我们还希望扩大 Squoosh CLI 的使用范围,并将更多功能集成到 Web 应用的构建流程中。

Squoosh 一直以来都是开源的,但我们从来没有专注于发展社区。2021 年,我们计划扩大贡献者群体,并优化项目的入职培训流程。

你对《Squoosh》有什么想法吗?请通过问题跟踪器告知我们。该团队计划延长冬季假期,但我们承诺在新的一年里再次与您联系。