支持新编解码器、更新设计和 CLI 支持!
Squoosh 是我们的团队构建并于 2018 年 Chrome 开发者峰会上首次亮相的图片压缩应用。我们构建该应用是为了让用户能够轻松试用 不同的图片编解码器,并展示现代 Web 的功能。
今天,我们将发布该应用的主要更新,其中包含更多编解码器支持、新设计,以及一种 在命令行中使用 Squoosh 的新方式,称为 Squoosh CLI。
支持新编解码器
除了浏览器中原生支持的编解码器之外,我们现在还支持 OxiPNG、MozJPEG、WebP 和 AVIF。借助 WebAssembly,我们再次实现了对新编解码器的支持。通过将编解码器 编码器和解码器编译为 WebAssembly 模块,用户即使 在首选浏览器不支持的情况下,也可以访问和试用较新的编解码器。
推出命令行 Squoosh!
自 2018 年首次发布以来,用户一直希望以编程方式与 Squoosh 进行交互,而无需使用界面。我们对此路径感到有些矛盾,因为我们的应用是基于命令行编解码器工具的 界面。不过,我们确实理解用户希望与整个编解码器软件包进行交互,而不是使用多个工具。Squoosh CLI 正是这样做的。
您可以通过运行 npm i @squoosh/cli 安装 Squoosh CLI 的 Beta 版,也可以使用 npx @squoosh/cli [parameters]
直接运行它。
Squoosh CLI 是用 Node 编写的,并且使用了与 PWA 完全相同的 WebAssembly 模块
。通过广泛使用工作器,所有图片都会并行解码、处理和编码。
我们还使用 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 有什么想法吗?请通过我们的 问题跟踪器告知我们。 团队即将进入漫长的寒假,但我们保证会在新年后尽快回复您。