项目简介

Squoosh是一个用TypeScript编写的图片压缩Web应用，利用WebAssembly技术在浏览器中实现高性能图片编码，支持多种现代图片格式和编码器。

核心优势:

• 🔒 隐私安全 - 完全浏览器端处理，图片不上传服务器
• ⚡ 性能强大 - WebAssembly加速，压缩速度快
• 🎨 格式丰富 - 支持WebP、AVIF、JPEG XL等新格式
• 🔍 实时预览 - 对比原图和压缩后效果
• 📊 参数可调 - 质量、编码器参数随意调整
• 📱 PWA应用 - 可离线使用

项目地址: https://github.com/GoogleChromeLabs/squoosh
在线体验: https://squoosh.app
Star数: 24,505

核心特性

快速上手

在线使用

1. 访问 https://squoosh.app
2. 拖拽或选择图片
3. 调整右侧压缩设置
4. 实时查看效果
5. 下载压缩后的图片

CLI命令行工具

# 安装
npm install -g @squoosh/cli

# 压缩单个图片（转WebP）
squoosh-cli --webp auto image.jpg

# 批量压缩
squoosh-cli --webp auto images/*.jpg

# 自定义质量
squoosh-cli --webp '{quality: 80}' image.jpg

# 多格式输出
squoosh-cli \
  --webp auto \
  --avif auto \
  --jxl auto \
  image.jpg

# 调整尺寸
squoosh-cli \
  --resize '{width: 800}' \
  --webp auto \
  image.jpg

离线PWA使用

# 浏览器访问 https://squoosh.app
# 点击地址栏的"安装"按钮
# 或 Chrome菜单 → 安装Squoosh

# 安装后可离线使用

功能详解

1. 格式转换

Squoosh支持多种现代图片格式。

支持的格式:

格式对比示例:

原���：image.jpg (2.5MB)
├── MozJPEG (质量85)：450KB (-82%)
├── WebP (质量80)：320KB (-87%)
├── AVIF (质量60)：180KB (-93%)
└── JPEG XL (质量80)：250KB (-90%)

2. 实时对比预览

Squoosh的杀手级功能是分屏对比。

操作方式:

1. 上传图片
2. 拖动中间分隔线
3. 左侧：原图
4. 右侧：压缩后
5. 实时对比质量和大小

显示信息:

原图信息：
├── 格式：JPEG
├── 尺寸：1920×1080
├── 大小：2.5MB
└── 颜色：RGB

压缩后信息：
├── 格式：WebP
├── 尺寸：1920×1080
├── 大小：320KB
├── 压缩率：87%
└── 质量损失：几乎无感知

3. 高级编码选项

每种格式都有丰富的参数可调。

WebP编码器:

{
  quality: 80,        // 质量 0-100
  target_size: 0,     // 目标大小（字节）
  target_PSNR: 0,     // 目标峰值信噪比
  method: 4,          // 压缩方法 0-6
  sns_strength: 50,   // 空间噪声整形
  filter_strength: 60,// 滤波强度
  filter_sharpness: 0,// 滤波锐度
  filter_type: 1,     // 滤波类型
  partitions: 0,      // 分区数
  segments: 4,        // 段数
  pass: 1,            // 编码次数
  show_compressed: 0, // 显示压缩区域
  preprocessing: 0,   // 预处理
  autofilter: 0,      // 自动滤波
  partition_limit: 0, // 分区限制
  alpha_compression: 1,// 透明通道压缩
  alpha_filtering: 1, // 透明通道滤波
  alpha_quality: 100, // 透明通道质量
  lossless: 0,        // 无损压缩
  exact: 0,           // 精确模式
  image_hint: 0,      // 图像提示
  emulate_jpeg_size: 0,// 模拟JPEG大小
  thread_level: 0,    // 线程数
  low_memory: 0,      // 低内存模式
  near_lossless: 100, // 接近无损
  use_delta_palette: 0,// 使用增量调色板
  use_sharp_yuv: 0    // 使用锐化YUV
}

AVIF编码器:

{
  cqLevel: 33,        // 质量 0-63（数值越小质量越高）
  cqAlphaLevel: -1,   // 透明通道质量
  denoiseLevel: 0,    // 降噪等级
  tileColsLog2: 0,    // 平铺列数
  tileRowsLog2: 0,    // 平铺行数
  speed: 6,           // 编码速度 0-10
  subsample: 1,       // 色度子采样
  chromaDeltaQ: false,// 色度增量量化
  sharpness: 0,       // 锐度
  tune: 0             // 调优目标
}

4. 图片调整

尺寸调整:

Resize选项：
├── 保持宽高比
├── 指定宽度
├── 指定高度
├── 百分比缩放
└── 自定义尺寸

其他调整:

Reduce palette（减少调色板）：
├── 颜色数量：2-256
└── 抖动算法

Rotate（旋转）：
├── 顺时针90°
├── 逆时针90°
└── 180°

实战案例

案例1: 网站图片优化

某电商网站使用Squoosh批量优化商品图片。

优化前:

商品图片：
├── 格式：JPEG
├── 平均大小：800KB
├── 总数：10,000张
├── 总大小：7.8GB
└── CDN流量成本：高

使用Squoosh CLI批量处理:

# 批量转WebP，质量80
squoosh-cli \
  --webp '{quality: 80, method: 6}' \
  --resize '{width: 1200}' \
  products/*.jpg

# 输出结果
# 10,000张图片 → 平均120KB
# 总大小：1.2GB
# 压缩率：85%

效果:

• 存储成本降低85%
• CDN流量减少85%
• 页面加载速度提升3倍
• 年节省成本：$50,000+

案例2: 博客图片优化

某技术博客使用Squoosh优化文章配图。

工作流:

1. 截图/拍照 → 原图（PNG，5MB）
2. 拖入Squoosh
3. 选择WebP，质量85
4. 调整尺寸为800px宽
5. 下载（150KB）
6. 上传到博客

压缩率：97%
质量：视觉无损

Markdown引用:

![文章配图](images/screenshot.webp)

<!-- 原图5MB，压缩后150KB -->
<!-- 读者加载速度快33倍 -->

对比分析

Squoosh的优势:

• ✅ Google出品，技术先进
• ✅ 隐私安全，本地处理
• ✅ 支持最新格式（AVIF、JPEG XL）
• ✅ 开源免费，无限制

选择建议:

• 现代格式转换 → Squoosh
• 快速PNG/JPG → TinyPNG
• Mac批量处理 → ImageOptim
• 复杂自动化 → FFmpeg

最佳实践

1. 选择合适的格式

图片类型建议：
├── 照片/复杂图像：
│   ├── 首选：AVIF（现代浏览器）
│   ├── 次选：WebP（兼容性好）
│   └── 兜底：MozJPEG（100%兼容）
├── 简单图标/UI：
│   ├── 首选：WebP（有损/无损）
│   └── 次选：OxiPNG（无损）
├── 透明背景：
│   ├── 首选：WebP（有损/无损）
│   ├── 次选：AVIF（超小）
│   └── 兜底：PNG（兼容）
└── 动画：
    ├── 首选：WebP动画
    └── 次选：GIF

2. 质量参数设置

推荐质量值：
├── AVIF：
│   ├── 高质量：cqLevel 25-30
│   ├── 平衡：cqLevel 30-35
│   └── 小文件：cqLevel 40-50
├── WebP：
│   ├── 高质量：quality 85-95
│   ├── 平衡：quality 75-85
│   └── 小文件：quality 60-75
└── MozJPEG：
    ├── 高质量：quality 90-95
    ├── 平衡：quality 80-90
    └── 小文件：quality 70-80

3. 响应式图片

# 生成多尺寸
squoosh-cli \
  --resize '{width: 1920}' \
  --webp auto \
  image.jpg -d dist/1920/

squoosh-cli \
  --resize '{width: 1024}' \
  --webp auto \
  image.jpg -d dist/1024/

squoosh-cli \
  --resize '{width: 640}' \
  --webp auto \
  image.jpg -d dist/640/

<!-- HTML使用 -->
<picture>
  <source
    srcset="dist/640/image.webp 640w,
            dist/1024/image.webp 1024w,
            dist/1920/image.webp 1920w"
    type="image/webp">
  <img src="image.jpg" alt="响应式图片">
</picture>

4. 自动化工作流

// package.json
{
  "scripts": {
    "optimize": "squoosh-cli --webp auto src/images/**/*.{jpg,png}",
    "build": "npm run optimize && webpack"
  }
}

# GitHub Actions
name: Optimize Images
on: [push]
jobs:
  optimize:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install -g @squoosh/cli
      - run: squoosh-cli --webp auto images/*.jpg

5. 渐进式增强

<!-- 提供多格式，浏览器自动选择 -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="图片">
</picture>

总结

Squoosh作为Google Chrome Labs的开源项目，凭借其：

• 🔒 隐私安全 - 完全本地处理，图片不上传
• ⚡ 性能强大 - WebAssembly加速，压缩快
• 🎨 格式丰富 - 支持AVIF、WebP、JPEG XL等
• 🔍 实时预览 - 分屏对比，效果直观
• 📊 参数丰富 - 深度定制压缩选项
• 📱 PWA离线 - 可安装，离线使用

已经成为现代Web开发的图片优化首选工具！

适合你的场景:

• 🌐 网站图片优化
• 📱 移动应用资源
• 📝 博客文章配图
• 🎨 设计稿导出
• 📧 邮件附件压缩

无论是前端开发者、设计师，还是内容创作者，Squoosh都能让你用最简单的方式实现极致的图片压缩。现在就试试Squoosh，让你的网站飞起来！

项目地址: https://github.com/GoogleChromeLabs/squoosh
在线体验: https://squoosh.app
CLI文档: https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli