Squoosh：本地完成图片压缩的浏览器工具

处理图片时很多人都会担心一件事：把照片传到某个在线压缩网站，隐私会不会泄露？Squoosh 的出现正是为了回应这个顾虑。它是 Google Chrome 团队开源的图像压缩 Web 应用，最核心的特点是所有压缩过程都在浏览器本地完成，原始图片从不上传到任何服务器。

Squoosh 主页的极简界面，深色背景下的"Drop or paste image here"提示-1

隐私：图片不离开浏览器

Squoosh 在隐私策略上做得相当克制。打开 squoosh.app 后，图片的解码、压缩、编码完全在用户浏览器内执行，依托 WebAssembly 实现的解码器和编码器直接运行在客户端。这意味着即便你处理的是包含敏感信息的截图、未发布的电商商品图或私人照片，也不会以文件形式被上传到后端。

不过官方 README 也明确提到，Squoosh 会通过 Google Analytics 收集少量匿名数据，包括：

  • 基础的访问者信息（与一般网站接入 GA 相同）
  • 图片压缩前后的体积数值
  • 如果通过 PWA 方式安装，会记录安装类型、时间和日期

这里收集的是压缩结果的数值，而不是图片本身。可以理解为：Squoosh 想知道”用户平均把图片压到了多小”，但并不关心你压的是什么图。

支持的格式相当丰富

Squoosh 不是只针对 JPG 或 PNG 做有损压缩，它更像是一个多编码器的对比实验台。常见的输出格式包括：

  • MozJPEG：有损 JPEG 编码，质量更高、文件更小
  • WebP：谷歌力推的现代格式，体积通常比 JPEG 小一截
  • AVIF：更新的编码格式，压缩率领先，但兼容性稍弱
  • OxiPNG：针对 PNG 的无损优化
  • JPEG XL（JP2/JXL）：新一代编码
  • GIF：用于简单动图

每种编码器下都能调质量参数、色度采样、压缩方法等细节，对于想深入比较不同编码差异的人来说，这种”同一个原图，多种编码器并排输出”的设计非常实用。

Squoosh 的格式与质量参数调整面板，下拉菜单列出 MozJPEG、WebP、AVIF 等编码器-2

左右滑块：所见即所得的对比

Squoosh 的界面最直观的部分是中间那条可以拖动的对比滑块。左边是原始图片，右边是压缩后的结果，拖动中间的分界线就能看到同一张图在两种状态下的画质差异。对于做技术决策的工程师或设计师来说，这种交互比单纯看文件大小要有说服力得多。

Squoosh 的左右对比滑块界面，中间一条竖线可以左右拖动查看画质差异-3

参数调整几乎都是实时的：你把质量滑块从 75 拉到 60，右边的图会立刻重新编码、文件大小同步刷新，整个过程不需要点”压缩”按钮。处理时间取决于图片尺寸和编码器复杂度，一张几 MB 的照片通常一两秒内就能看到新结果。

基于 WebAssembly 的纯前端方案

Squoosh 的”不传图”承诺之所以能落地，关键在于它把 MozJPEG、libwebp、libavif 等 C/C++ 编写的图像编码器编译成了 WebAssembly 模块。这些模块被加载到浏览器后，可以调用用户机器的 CPU 完成压缩，因此：

  • 无需后端服务器，部署成本极低
  • 大图也能处理，因为计算在本地完成
  • 即使离线也能工作（前提是页面已经加载过编码器）

也正因如此，Squoosh 可以作为PWA（渐进式 Web 应用）安装到桌面或手机上。第一次访问后，浏览器会缓存所需的资源，之后断网也能继续压缩图片。

嵌入第三方网站

Squoosh 还提供了嵌入模式，允许其他网站通过 iframe 或脚本调用它的压缩能力。这意味着一些博客系统、CMS 或者在线表单可以把图片压缩功能直接内嵌进去，让用户上传图片前先在本地瘦一圈。对于想给自家产品加图片优化能力、又不想自己维护编码器服务的开发者来说，这种方式省事不少。具体嵌入方式建议参考官方仓库或文档。

适合的使用场景

结合 Squoosh 的特性，以下几类场景会比较合适：

  • 博客或文档配图瘦身：把几 MB 的截图压到几百 KB，网页加载明显更顺
  • 电商商品图优化：在保证主图清晰度的前提下，把 PNG/JPG 批量转为 WebP 或 AVIF
  • 隐私敏感图片处理：截图、合同扫描件、身份证明等不愿上云的文件
  • 格式选型评估：同一张图跑几种编码器，看哪种格式在目标质量下体积最小
  • 无服务器环境的图片处理：本地工具链受限的前端开发者，可以直接用网页代替本地 ImageMagick 做快速压缩

本地开发简述

如果想自己修改或二次开发 Squoosh，可以按 README 的步骤来：

# 克隆仓库
git clone https://github.com/GoogleChromeLabs/squoosh.git
cd squoosh

# 安装依赖
npm install

# 构建
npm run build

# 启动开发服务器
npm run dev

构建完成后，开发服务器通常会监听本地端口，浏览器打开后即可看到与 squoosh.app 一样的界面。修改源码后重新构建即可看到效果。具体的目录结构和组件拆分，建议直接参考仓库里的源码注释和贡献指南。

使用上的几个注意点

虽然 Squoosh 用起来很顺手，但也有几点值得提前了解：

  • 首次加载较慢：WebAssembly 编码器体积不小，首次打开页面时要下载这些模块，可能需要等待几秒
  • 极大大图可能吃内存：压缩超高分辨率图片时，浏览器内存占用会显著上升，建议分批处理或先用其他工具降分辨率
  • 编码器兼容性：AVIF、JPEG XL 等新格式在不同浏览器和系统上的解码兼容性不同，如果压缩后的图片要面向广泛用户，建议同时保留一份 WebP 或 JPEG 作为兜底
  • 不是批处理工具：Squoosh 主要针对单张图片逐个调参，如果你有几百张图要批量转换，更适合用本地脚本配合 libvips、ImageMagick 或 cwebp 等 CLI 工具

小结

Squoosh 的定位其实很清晰：在不牺牲隐私的前提下，把专业级的图像编码能力搬到浏览器里。它不是 Photoshop 的替代品，也不打算做批量流水线，但对于偶尔需要压缩几张图、又不想把照片交给第三方网站的人来说，是一个相当省心的选择。无论是用来给博客配图瘦身、对比不同编码器的效果，还是单纯作为本地图片压缩工具，都值得加进浏览器书签栏里。

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。