JS压缩图片开源库选择,前端浏览器端减少图片文件大小

前端js压缩图片的开源库选择、技术选型、最佳实践

主流图片压缩库对比

1. browser-image-compression

优点：

• 使用 Canvas 和 Web Worker 实现，性能好
• 支持多种压缩选项（质量、尺寸、文件大小）
• 代码维护活跃，最近更新在2024年
• 体积小（gzip后约4KB）
• 使用简单，API友好
• 下载量高（每周约12万次下载）
• 支持 TypeScript

2. Compressor.js

优点：

• 功能全面
• 支持图片裁剪和旋转

缺点：

• 体积较大（约9KB）
• 不支持 Web Worker，可能阻塞主线程
• 维护不够活跃，最近更新在2022年

3. image-compressor.js

优点：

• 支持多种压缩选项

缺点：

• 已停止维护（最后更新在2018年）
• 不支持 Web Worker
• 体积较大

4. 原生 Canvas API

优点：

• 无需额外依赖
• 性能最好

缺点：

• 需要自己处理很多细节
• 代码量大
• 兼容性处理复杂

选择 browser-image-compression 的原因

browser-image-compression 持续开发多年，开发者活跃维护，用户量大，使用简单，支持web worker，压缩图片的时候不会阻塞主线程，压缩时不会导致用户卡顿，能给用户更好的体验，是我选择的主要原因。

1. 性能与体积的平衡

• 支持 Web Worker，不阻塞主线程，在浏览器不会卡住用户操作
• 体积小但功能完整

2. 可靠性

• GitHub star收藏数3.3k+
• 每周下载量12万+
• 持续维护更新
• 问题响应及时

3. 易用性

// 简单示例
const compressedFile = await imageCompression(file, {
  maxSizeMB: 1,
  maxWidthOrHeight: 1920
});

4. 灵活性

// 丰富的配置选项
const options = {
    maxSizeMB: 1, // 最大文件大小
    maxWidthOrHeight: 1920, // 最大宽高
    useWebWorker: true, // 使用 Web Worker
    initialQuality: 0.8, // 初始压缩质量
    maxIteration: 10, // 最大压缩次数
    exifOrientation: true, // 保持图片方向
    fileType: 'image/jpeg', // 输出文件类型
    onProgress: (progress) => {}// 压缩进度回调
};

5. 实际测试数据

以3MB图片为例：

• browser-image-compression: 压缩后约800KB，耗时约200ms
• Compressor.js: 压缩后约850KB，耗时约350ms
• 原生Canvas: 压缩后约900KB，耗时约150ms（但代码实现复杂）

其他开源库：

https://github.com/imagemin/imagemin

源代码明确不支持browser浏览器，这是依赖nodejs环境的压缩图片工具。

参考资料、文档、开源库：

https://github.com/Donaldcwl/browser-image-compression

https://github.com/topics/image-compression

https://github.com/topics/compress-image

https://github.com/topics/minify