怡氧桌面端 Office 文档中的图片压缩实现

引言

在当今数字化办公环境中，Office 文档已成为企业日常协作的重要载体。随着高清图片的广泛应用，文档中的图片不仅丰富了表达内容，提升了文档的可读性和专业性，但同时也带来了一系列技术挑战：

• 存储负担：大量高清图片会显著增加文档体积，占用企业宝贵的存储资源
• 单张高清图片可能达到数 MB 大小
• 一份文档动辄包含数十张图片
• 企业级存储成本居高不下
• 传输效率：过大的文件会影响文档的上传下载速度
• 网络带宽受限时下载缓慢
• 移动办公场景下体验更差
• 多人同时访问时服务器压力大
• 协作体验：文档加载缓慢会影响多人协作效率
• 打开大文档耗时长
• 页面渲染卡顿
• 实时协作延迟高
• 影响团队工作效率
• 版本管理：大体积文档的版本控制也面临挑战
• 占用更多版本存储空间
• 历史版本对比耗时增加
• 文档备份成本提高

为了优化这些问题，我们在怡氧桌面端中开发了智能图片压缩功能。该功能可以在保证图片视觉质量的前提下，有效降低文档体积，提升协作效率。本文将从技术选型、压缩策略、性能优化等多个维度，详细介绍这一功能的设计思路和实现细节。

技术方案概述

我们的技术选型主要基于以下考虑：

1. Sharp：选择 Sharp 作为核心图像处理库

• 基于 libvips 实现，C++ 底层保证高性能
• 内存占用低，适合批量处理
• 支持主流图片格式，压缩效果优异

1. Electron Utility Process

• 将 CPU 密集型的压缩任务隔离到独立进程
• 避免阻塞主进程，保证界面响应流畅

1. p-limit

• 智能控制并发任务数量
• 优化系统资源利用

压缩策略详解

在怡氧桌面端中，我们主要处理 JPEG 和 PNG 这两种最常见的图片格式。针对不同的格式，我们采用了不同的压缩策略。

JPEG 压缩策略

JPEG 格式主要用于照片等色彩丰富的图像，我们采用以下策略：

1. 质量控制

• 默认质量值设置为 75
• 通过 estimateQuality 函数评估原图质量
• 压缩后的质量不超过原图质量

1. 优化选项

• 启用 mozjpeg 优化
• 保留重要的元数据信息
• 移除不必要的颜色配置文件

示例代码：

async function compressJPEG(buffer: Buffer, qualityFactor: number) {
  const originalQuality = await estimateQuality(buffer);
  const targetQuality = Math.min(75, originalQuality);

  return sharp(buffer)
    .jpeg({
      quality: Math.round(targetQuality * qualityFactor),
      mozjpeg: true,
    })
    .toBuffer();
}

为什么要评估原图质量？

在图片压缩过程中，评估原图质量是一个非常重要的步骤，主要有以下几个原因：

1. 避免过度压缩

• 如果原图已经经过压缩（比如质量值为 60），再使用更高的质量值（如 75）进行压缩反而会增加文件大小
• 通过评估原图质量，我们可以确保压缩后的质量不会超过原图，避免不必要的文件体积增加

1. 智能质量控制

• JPEG 图片的质量值范围是 0-100
• 通过分析量化表（Quantization Tables），我们可以估算出原图的压缩质量
• 这样可以根据原图质量动态调整压缩参数，而不是简单地使用固定值

1. 保持图片质量平衡

• 对于已经高度压缩的图片，继续压缩可能会导致明显的质量损失
• 通过评估原图质量，我们可以在文件大小和视觉质量之间找到更好的平衡点

质量评估的实现原理

我们通过分析 JPEG 文件的量化表来估算图片质量：

1. 基准量化表

• 使用 JPEG 标准中定义的基准亮度量化表（质量值 50）

1. 比较算法

• 提取图片中的量化表
• 将实际量化表与基准表进行比较
• 计算缩放因子并使用经验公式估算质量值

1. 质量计算

• 当缩放因子小于 1 时，表示质量低于 50
• 当缩放因子大于 1 时，表示质量高于 50
• 最终结果被限制在 0-100 范围内

这种方法让我们能够智能地控制压缩过程，避免压缩后文件变大的问题。

PNG 压缩策略

PNG 格式常用于需要透明度的图像和图标，压缩策略如下：

• 使用最高压缩级别（level 9）
• 启用调色板模式

为什么使用调色板模式？

调色板模式（Palette Mode）是 PNG 格式中一种重要的优化技术，具有以下优势：

1. 数据存储优化

• 传统 PNG 使用 RGB/RGBA 模式，每个像素需要 3-4 个字节
• 调色板模式将颜色信息存储在一个查找表中
• 每个像素只需要一个索引值（通常是 1 个字节）来引用颜色表

1. 适用场景

• 对于颜色数量有限的图像（如图标、Logo）效果最佳
• 当图像中重复颜色较多时，可显著减小文件大小
• 特别适合扁平化设计的 UI 元素

1. 压缩效率

• 减少了像素数据的存储空间
• 提高了 DEFLATE 算法的压缩效率
• 可以在保持视觉质量的同时大幅减小文件体积

1. 智能转换

• Sharp 库会自动评估是否适合使用调色板模式
• 如果颜色过多，会自动降级到标准 RGB/RGBA 模式
• 确保最终输出的图像质量

通用优化策略

对于所有图片格式，我们都采用以下通用策略：

1. 阈值控制

• 设置最小压缩阈值（50KB）
• 只在压缩效果显著时才保存
• 避免过度压缩

1. 性能优化

• 使用 Utility Process 处理压缩任务
• 根据 CPU 核心数控制并发
• 批量处理时分批执行

并发控制实现

在处理大量图片时，我们使用 p-limit 库来控制并发任务数量。具体实现如下：

1. 动态并发数设置

// 根据 CPU 核心数确定并发数
const concurrency = Math.max(os.cpus().length - 1, 1);
const limit = pLimit(concurrency);

2. 任务队列管理

// 将所有图片压缩任务映射为限制并发的 Promise
const tasks = images.map((image) =>
  limit(async () => {
    try {
      const imageBuffer = await readFile(image);
      // ... 压缩处理逻辑 ...

      completed++;
      // 更新进度
      const progressPercentage = Math.round((completed / totalImages) * 100);
      process.parentPort.postMessage({
        type: 'loading',
        payload: {
          progress: `${progressPercentage}%`,
        },
      });

      return sizeReduction;
    } catch (error) {
      console.error(`Error processing ${image}:`, error);
      return 0;
    }
  })
);

总结

总的来说，我们在怡氧桌面端里做了个挺实用的功能 – Office 文档图片压缩。这个功能直接帮用户解决了文档太大、打开慢的问题，让大家协作起来更顺畅了。

参考链接

1. Sharp – High performance Node.js image processing
2. Electron Utility Process – 实用程序进程
3. p-limit – Run multiple promise-returning & async functions with limited concurrency