Squoosh v2 发布

新的编解码器支持、更新的设计以及 CLI 支持!

Mariko Kosaka

Squoosh 是我们的团队打造的图片压缩应用,并在 2018 年 Chrome 开发者峰会上首次发布。我们构建它的目的是方便尝试不同的图像编解码器并展示现代网络的功能。

今天,我们将发布该应用的重大更新,支持更多编解码器、全新的设计,以及一种在命令行(名为 Squoosh CLI)中使用 Squoosh 的新方法。

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

自 2018 年首次发布以来,用户经常要求在没有界面的情况下通过程序化方式与 Squoosh 互动。我们对这条路径感到有点冲突,因为我们的应用是基于命令行的编解码器工具的界面。但是,我们理解用户希望与整个编解码器软件包(而不是多种工具)进行交互。Squoosh CLI 正好可以做到这一点。

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

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

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

构建流程从 Webpack 更改为 Rollup

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

此项目最初是使用 Webpack 启动的,因为我们希望作为一个团队来试用 Webpack。在 2018 年,Webpack 是唯一能够让我们有足够的控制权限来按照自己想要的方式设置项目的工具。随着时间的推移,我们发现 Rollup 简单易用的插件系统和 ESM 的简易性,使其成为此项目的自然选择。

更新了界面设计

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

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

接下来该怎么做?

我们计划继续完善 Squoosh。随着新图片格式的发布,我们希望用户能够在一个位置轻松使用编解码器进行播放。我们还希望扩大 Squoosh CLI 的使用范围,并将更多功能集成到 Web 应用的构建流程中。

Squoosh 一直都是开源的,但我们从未专注于发展社区。2021 年,我们计划扩大贡献者群体,并完善该项目的新手入门流程。

你对 Squoosh 有什么想法吗?请通过问题跟踪器告知我们。我们的团队正准备延长冬季假期,但我们承诺会在新的一年里继续为您服务。