新的编解码器支持、更新的设计和 CLI 支持!
Squoosh 是一款图像压缩应用,由我们的团队构建,并于2018 年 Chrome 开发者峰会上首次亮相。我们构建它的目的是为了方便地试验不同的图像编解码器,并展示现代 Web 的功能。
今天,我们发布了该应用的主要更新,增加了更多编解码器支持、全新设计以及一种在命令行中使用 Squoosh 的新方法,称为 Squoosh CLI。
新的编解码器支持
除了浏览器本身支持的编解码器外,我们现在还支持 OxiPNG、MozJPEG、WebP 和 AVIF。借助 WebAssembly 的使用,新的编解码器再次成为可能。通过将编解码器编码器和解码器编译为 WebAssembly 模块,用户即使在他们首选的浏览器不支持的情况下,也可以访问和试验更新的编解码器。
发布命令行 Squoosh!
自 2018 年首次发布以来,常见的用户请求是以编程方式与 Squoosh 交互,而无需 UI。我们对这条路径感到有些矛盾,因为我们的应用是基于命令行编解码器工具之上的 UI。但是,我们确实理解用户希望与整个编解码器包而不是多个工具进行交互的愿望。Squoosh CLI 正是为此而生。
您可以通过运行 npm i @squoosh/cli
安装 Squoosh CLI 的 Beta 版本,或者使用 npx @squoosh/cli [parameters]
直接运行它。
Squoosh CLI 使用 Node 编写,并使用了 PWA 使用的完全相同的 WebAssembly 模块。通过广泛使用 worker,所有图像都并行解码、处理和编码。我们还使用 Rollup 将所有内容捆绑到一个 JavaScript 文件中,以确保通过 npx
进行安装快速而无缝。CLI 还提供自动压缩,它会尝试在不降低视觉保真度的情况下尽可能降低图像质量(使用 Butteraugli 指标)。
借助 Squoosh CLI,您可以将 Web 应用中的图像压缩为多种格式,并使用 <picture>
元素 让浏览器选择最佳版本。我们还计划为 Webpack、Rollup 和其他构建工具构建插件,使图像压缩成为构建过程的自动组成部分。
构建过程从 Webpack 更改为 Rollup
构建 Squoosh 的同一个团队今年花费了大量时间研究 Tooling Report 的构建工具,并决定将我们的构建过程从 Webpack 切换到 Rollup。
该项目最初是使用 Webpack 启动的,因为我们团队想尝试一下,并且在 2018 年,Webpack 是唯一一款为我们提供足够控制权以按照我们想要的方式设置项目的工具。随着时间的推移,我们发现 Rollup 易于使用的插件系统和 ESM 的简洁性使其成为该项目的自然选择。
更新的 UI 设计
我们还更新了应用程序的 UI 设计,以 blobs
作为视觉元素。这有点像我们如何处理代码中数据的双关语。Squoosh 以 blob 的形式传递图像数据,因此在设计中包含一些 blob 感觉很自然(明白了吗?)。
颜色使用也得到了改进,因此颜色不仅仅是一种强调色,而且还是区分和强化哪个图像在选项上下文中的向量。总而言之,主页更生动,工具本身也更清晰简洁。
下一步是什么?
我们计划继续开发 Squoosh。随着新的图像格式发布,我们希望我们的用户能够在一个地方体验编解码器,而无需进行繁重的工作。我们还希望扩展 Squoosh CLI 的使用,并更多地集成到 Web 应用程序的构建过程中。
Squoosh 一直是开源的,但我们从未专注于发展社区。在 2021 年,我们计划扩大我们的贡献者基础,并为该项目提供更好的入门流程。
您对 Squoosh 有什么想法吗?请在我们的 问题跟踪器上告知我们。团队即将开始较长的寒假,但我们保证在新的一年回复您。