Squoosh

Google 出品的浏览器端图片压缩与格式转换工具，基于 WebAssembly 实现本地处理

技术简介说明

Squoosh 是由 Google ChromeLabs 团队开发的图片压缩与转换工具。它的核心特点是所有图片处理都在浏览器本地完成，图片不会上传到任何服务器，充分保护用户隐私。Squoosh 将专业的图片编解码器（如 MozJPEG、OxiPNG、libwebp、libavif 等）编译为 WebAssembly，使其能够在浏览器和 Node.js 环境中高效运行。

Squoosh 提供直观的可视化对比界面，用户可以通过滑动条实时对比压缩前后的效果，精确调整各项参数。它支持多种现代图片格式，包括 WebP、AVIF、JPEG XL 等，并能展示不同编码器在相同图片上的压缩效果差异。

需要注意的是，截至 2026 年，Google 已停止对 Squoosh 的积极维护。Web 应用（squoosh.app）仍可访问但处于静态归档状态，npm 包最后一次发布是 2023 年 1 月。尽管如此，Squoosh 的 WebAssembly 编解码器仍具有很高的技术价值，被社区项目持续复用。

基本信息

• 官网：https://squoosh.app/（已归档，仍可访问）
• GitHub：https://github.com/GoogleChromeLabs/squoosh
• License：Apache-2.0
• 最新版本：@squoosh/lib 0.5.3（2023-01-03）；@squoosh/cli 0.7.3（2023-01-03）
• 主要维护者/公司：Google ChromeLabs（已停止积极维护）

快速上手

安装

# 安装 Node.js 库（已停止维护）
npm install @squoosh/lib
 
# 安装 CLI 工具（已停止维护）
npm install -g @squoosh/cli
 
# 使用 npx 临时运行
npx @squoosh/cli --help

⚠️ 注意：Squoosh 的 npm 包已超过 3 年未更新，新项目不建议直接依赖。

基础配置

使用 @squoosh/lib 进行编程式处理：

import { ImagePool } from '@squoosh/lib';
import fs from 'fs';
 
// 创建图片处理池
const imagePool = new ImagePool();
 
// 读取图片
const image = imagePool.ingestImage('input.jpg');
 
// 等待解码完成
await image.decoded;

最小示例

import { ImagePool } from '@squoosh/lib';
import fs from 'fs';
 
async function compress() {
  const imagePool = new ImagePool();
  const image = imagePool.ingestImage('input.jpg');
  await image.decoded;
 
  // 设置压缩参数
  await image.encode({
    mozjpeg: { quality: 75 },
    webp: { quality: 75 },
  });
 
  // 保存结果
  for (const encodedImage of Object.values(image.encoded)) {
    fs.writeFileSync(
      `output.${encodedImage.extension}`,
      Buffer.from(encodedImage.binary)
    );
    console.log(
      `${encodedImage.extension}: ${(encodedImage.binary.length / 1024).toFixed(1)}KB`
    );
  }
 
  imagePool.close();
}
 
compress();

核心概念与架构

核心架构

Squoosh 采用三层架构设计：

1. 前端应用层：基于 Preact 构建的 SPA 应用，提供可视化界面
2. 编解码器层：将 C/C++/Rust 编写的图片编解码器编译为 WebAssembly
3. 处理引擎层：Web Worker + WebAssembly，在浏览器中实现高性能图片处理

工作原理

1. 图片加载：用户上传图片后，浏览器解码为位图数据
2. WASM 处理：位图数据传递到 WebAssembly 编解码器进行处理
3. 参数调优：每个编解码器暴露各自的参数供用户调整
4. 结果对比：通过 Canvas 渲染原图和处理后图片的滑动对比

WebAssembly 编解码器

这是 Squoosh 最核心的技术创新，将专业编解码器编译为 WASM：

核心特性

• 浏览器本地处理：所有编解码在本地完成，图片不上传服务器，保护隐私
• 实时可视化对比：滑动对比原图与压缩后效果，可放大检查细节
• 丰富的编解码器：支持 MozJPEG、OxiPNG、WebP、AVIF、JPEG XL 等多种编码器
• 参数可调：每个编解码器暴露完整的压缩参数供微调
• WebAssembly 驱动：核心编解码器编译为 WASM，可在浏览器和 Node.js 中运行
• PWA 支持：支持离线使用，可安装为桌面或移动应用
• CLI 工具：提供命令行批量压缩工具
• 自动压缩（v2）：自动选择最优参数，在不降低视觉质量的前提下最小化文件

生态图

关键依赖

• WebAssembly 编解码器：MozJPEG、OxiPNG、libwebp、libavif、libjxl
• 前端框架：Preact
• Worker 通信：Web Worker + Comlink
• 构建工具：Webpack / Vite

相关项目和替代品

由于 Squoosh 已停止维护，社区涌现出多个替代方案：

社区生态

• GitHub Stars：约 25,400+
• npm 周下载量：@squoosh/lib ~16,600 次/周
• 技术影响力：WASM 编解码器被多个项目复用

适用场景

• 图片压缩可视化：需要直观对比压缩前后效果时使用（Web 应用仍可用）
• 格式转换测试：测试不同编码器（WebP、AVIF、JPEG XL）在同一图片上的效果
• WebAssembly 图片处理参考：学习如何将 C/Rust 编解码器编译为 WASM
• 离线图片处理：PWA 特性支持无网络环境下使用
• 隐私敏感场景：图片不上传服务器，适合处理敏感图片
• 学习和教育：理解图片编解码原理和参数影响
• 快速单张图片处理：不需要批量处理时的快速解决方案

⚠️ 注意：由于 Squoosh 已停止维护，新项目请考虑替代方案。

开发与工程化

本地开发

# 克隆仓库
git clone https://github.com/GoogleChromeLabs/squoosh.git
cd squoosh
 
# 安装依赖
npm install
 
# 启动开发服务器
npm run dev
 
# 构建生产版本
npm run build

CLI 使用

# 单文件压缩
squoosh-cli input.jpg -d output/
 
# 指定编码器
squoosh-cli input.png --mozjpeg '{quality: 80}' -d output/
 
# 批量处理
squoosh-cli 'images/*.jpg' --webp '{quality: 75}' -d output/

构建部署

Squoosh 作为静态 Web 应用，可以部署到任何静态托管服务：

# 构建
npm run build
 
# 输出目录 dist/ 部署到：
# - Vercel
# - Netlify
# - GitHub Pages
# - Cloudflare Pages

工程化最佳实践

1. 提取 WASM 编解码器：将 Squoosh 的 WASM 编解码器提取到自己的项目中使用
2. Web Worker 隔离：图片处理放在 Web Worker 中，避免阻塞主线程
3. 渐进增强：检测 WebAssembly 支持，降级到服务端处理

性能与安全

性能特点

• 单线程限制：WebAssembly 在浏览器中运行，受限于浏览器线程模型
• 大文件处理：处理大图片时可能造成浏览器卡顿
• 内存占用：所有处理在浏览器内存中完成，大图片可能消耗较多内存
• WASM 加载时间：首次加载编解码器需要下载 WASM 文件（数 MB）

性能基准

安全注意事项

• 无服务端交互：图片不上传，无数据泄露风险
• WASM 沙箱：WebAssembly 运行在浏览器沙箱中，安全性有保障
• XSS 风险：如果自行部署，注意防止用户上传恶意 SVG
• 依赖安全：npm 包已超过 3 年未更新，可能存在已知漏洞

已知性能瓶颈

• AVIF 编码：rav1e 编码器速度较慢，大图片可能需要数十秒
• 并发处理：浏览器 Web Worker 数量有限
• 首次加载：WASM 编解码器下载和初始化需要数秒

技术对比

与同类工具对比

选择建议

• 选择 Squoosh：需要可视化对比、隐私保护、单张图片快速处理（Web 应用仍可用）
• 选择 Sharp：需要高性能、批量处理、服务端集成
• 选择 Imagemin：需要灵活的插件化配置、构建流水线集成
• 选择 TinyPNG：需要简单好用的在线压缩服务

最佳实践

当前推荐用法

1. 作为在线工具使用：直接访问 squoosh.app 进行单张图片的快速压缩和格式转换
2. 提取 WASM 编解码器：将 Squoosh 的 WASM 模块提取到自己的项目中使用
3. 不作为新项目依赖：npm 包已停止更新，存在安全风险

替代方案

如果正在寻找 Squoosh 的替代品：

// 替代方案 1：使用 Sharp（服务端）
const sharp = require('sharp');
await sharp('input.jpg')
  .webp({ quality: 75 })
  .toFile('output.webp');
 
// 替代方案 2：使用浏览器原生 Canvas API（前端）
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = () => {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0);
  canvas.toBlob(blob => {
    // 导出为 WebP（如果浏览器支持）
  }, 'image/webp', 0.75);
};
 
// 替代方案 3：使用 Asset Melt（Web 应用）
// 访问 https://assetmelt.com，功能类似 Squoosh

常见陷阱

1. AVIF 编码慢：AVIF 编码需要大量计算，大图片可能非常慢
2. 内存限制：浏览器内存有限，不要处理超大图片
3. 格式兼容性：AVIF 和 JPEG XL 并非所有浏览器都支持

技术局限与边界

已知限制

1. 已停止维护：Google 不再积极开发，npm 包超过 3 年未更新
2. 批量处理弱：Web 应用不适合批量处理大量图片
3. 无法服务端部署：WASM 编解码器虽然可以在 Node.js 运行，但官方未提供稳定的服务端方案
4. 无 API 服务：不能作为后端图片处理服务使用
5. 依赖老化：底层依赖可能存在已知安全漏洞

不适用场景

• 生产环境构建流水线：已停止维护，不适合 CI/CD
• 大规模批量处理：性能和稳定性无法满足需求
• 需要长期维护的项目：作为依赖会引入维护风险
• 服务端图片处理：应使用 Sharp 等服务端工具

权衡取舍

• 隐私 vs 性能：浏览器本地处理保护隐私，但性能不如原生库
• 易用 vs 功能：Web 界面直观易用，但功能不如专业工具丰富
• 创新 vs 稳定：技术创新（WASM 编解码器）领先，但项目稳定性不足

学习资源

官方文档

• Squoosh Web 应用：https://squoosh.app/
• GitHub 仓库：https://github.com/GoogleChromeLabs/squoosh
• @squoosh/lib npm：https://www.npmjs.com/package/@squoosh/lib
• Squoosh v2 公告：https://web.dev/blog/squoosh-v2

教程

• Web.dev 图片优化指南：https://web.dev/fast/#optimize-your-images
• Squoosh 使用教程：https://www.smashingmagazine.com/2021/09/squoosh-image-optimization/
• WebAssembly 图片处理：https://developer.mozilla.org/en-US/docs/WebAssembly

社区资源

• GitHub Issues：https://github.com/GoogleChromeLabs/squoosh/issues
• ChromeLabs 博客：https://chromelabs.com/
• 替代方案讨论：https://assetmelt.com/blog/squoosh-alternative-guide

2026 年现状

项目状态

Squoosh 在 2026 年处于停止维护状态：

• Web 应用：squoosh.app 仍可访问，但以静态归档形式运行
• npm 包：最后发布是 2023 年 1 月，超过 3 年未更新
• GitHub 仓库：未归档（archived=false），但最后一次代码提交是 2024 年 8 月
• 社区：GitHub Stars 仍增长至约 25,400+，但无实质开发活动

技术遗产

尽管项目停止维护，Squoosh 的技术贡献仍然重要：

1. WASM 编解码器：被 unjs/ipx、Asset Melt 等项目复用
2. 可视化对比：影响了后续图片优化工具的设计
3. 浏览器端图片处理：推动了 WebAssembly 在图片处理领域的应用

推荐替代方案

未来展望

目前无官方复活计划。但 Squoosh 的核心价值——WebAssembly 图片编解码器——作为开源代码将继续被社区项目复用和发展。如果 Google 或社区决定 Fork 并继续维护，Squoosh 仍有重新活跃的可能。