Squoosh：本地完成图片压缩的浏览器工具
处理图片时很多人都会担心一件事：把照片传到某个在线压缩网站，隐私会不会泄露？Squoosh 的出现正是为了回应这个顾虑。它是 Google Chrome 团队开源的图像压缩 Web 应用，最核心的特点是所有压缩过程都在浏览器本地完成，原始图片从不上传到任何服务器。
隐私：图片不离开浏览器
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 的界面最直观的部分是中间那条可以拖动的对比滑块。左边是原始图片，右边是压缩后的结果，拖动中间的分界线就能看到同一张图在两种状态下的画质差异。对于做技术决策的工程师或设计师来说，这种交互比单纯看文件大小要有说服力得多。
参数调整几乎都是实时的：你把质量滑块从 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 的替代品，也不打算做批量流水线，但对于偶尔需要压缩几张图、又不想把照片交给第三方网站的人来说，是一个相当省心的选择。无论是用来给博客配图瘦身、对比不同编码器的效果，还是单纯作为本地图片压缩工具，都值得加进浏览器书签栏里。
评论(0)