Image Compression Implementation in Office Documents for Eo2suite Desktop

Introduction

In today’s digital office environment, Office documents have become a crucial medium for daily corporate collaboration. With the widespread use of high-definition images, the pictures in documents not only enrich the content and enhance readability and professionalism but also bring a series of technical challenges:

• Storage Burden: A large number of high-definition images significantly increase the document size, occupying valuable corporate storage resources.
• A single high-definition image can be several MB in size.
• A document often contains dozens of images.
• Corporate storage costs remain high.
• Transmission Efficiency: Oversized files affect the upload and download speed of documents.
• Slow downloads when network bandwidth is limited.
• Worse experience in mobile office scenarios.
• Increased server pressure when accessed by multiple users simultaneously.
• Collaboration Experience: Slow document loading affects the efficiency of multi-user collaboration.
• Long time to open large documents.
• Page rendering lag.
• High real-time collaboration latency.
• Impacts team productivity.
• Version Management: Version control of large documents also faces challenges.
• Occupies more version storage space.
• Increases time for historical version comparison.
• Raises document backup costs.

To optimize these issues, we developed an intelligent image compression feature in Eo2suite Desktop. This feature effectively reduces document size while maintaining visual quality, improving collaboration efficiency. This article will detail the design and implementation of this feature from multiple dimensions, including technical selection, compression strategies, and performance optimization.

Technical Solution Overview

Our technical selection is primarily based on the following considerations:

1. Sharp: Chose Sharp as the core image processing library.

• Implemented based on libvips, ensuring high performance with C++.
• Low memory usage, suitable for batch processing.
• Supports mainstream image formats with excellent compression effects.

1. Electron Utility Process

• Isolates CPU-intensive compression tasks into independent processes.
• Prevents blocking the main process, ensuring smooth interface response.

1. p-limit

• Intelligently controls the number of concurrent tasks.
• Optimizes system resource utilization.

Compression Strategy Details

In Eo2suite Desktop, we mainly handle JPEG and PNG, the two most common image formats. For different formats, we adopted different compression strategies.

JPEG Compression Strategy

JPEG format is mainly used for color-rich images like photos. We adopted the following strategy:

1. Quality Control

• Default quality value set to 75.
• Evaluates original image quality via the estimateQuality function.
• Compressed quality does not exceed the original image quality.

1. Optimization Options

• Enables mozjpeg optimization.
• Retains important metadata.
• Removes unnecessary color profiles.

Example code:

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();
}

Why Evaluate Original Image Quality?

Evaluating original image quality is a crucial step in image compression for several reasons:

1. Avoid Over-compression

• If the image is already compressed (e.g., quality value 60), using a higher quality value (e.g., 75) may increase file size.
• By evaluating original image quality, we ensure compressed quality does not exceed the original, avoiding unnecessary file size increase.

1. Intelligent Quality Control

• JPEG image quality ranges from 0-100.
• By analyzing quantization tables, we estimate the original compression quality.
• This allows dynamic adjustment of compression parameters based on original quality rather than using fixed values.

1. Maintain Quality Balance

• Further compressing highly compressed images may lead to noticeable quality loss.
• Evaluating original image quality helps find a better balance between file size and visual quality.

Quality Evaluation Implementation Principle

We estimate image quality by analyzing JPEG file quantization tables:

1. Benchmark Quantization Table

• Uses the standard JPEG luminance quantization table (quality value 50).

1. Comparison Algorithm

• Extracts quantization tables from the image.
• Compares actual quantization tables with the benchmark.
• Calculates scaling factor and estimates quality using empirical formulas.

1. Quality Calculation

• Scaling factor less than 1 indicates quality below 50.
• Scaling factor greater than 1 indicates quality above 50.
• Final result is capped within 0-100 range.

This method allows intelligent control of the compression process, preventing file size increase post-compression.

PNG Compression Strategy

PNG format is often used for images requiring transparency and icons. The compression strategy is as follows:

• Uses the highest compression level (level 9).
• Enables palette mode.

Why Use Palette Mode?

Palette mode is a significant optimization technique in PNG format with the following advantages:

1. Data Storage Optimization

• Traditional PNG uses RGB/RGBA mode, requiring 3-4 bytes per pixel.
• Palette mode stores color information in a lookup table.
• Each pixel only needs an index value (usually 1 byte) to reference the color table.

1. Application Scenarios

• Best for images with limited colors (e.g., icons, logos).
• Significantly reduces file size when images have many repeated colors.
• Ideal for flat design UI elements.

1. Compression Efficiency

• Reduces pixel data storage space.
• Improves DEFLATE algorithm compression efficiency.
• Significantly reduces file size while maintaining visual quality.

1. Smart Conversion

• Sharp library automatically evaluates suitability for palette mode.
• Degrades to standard RGB/RGBA mode if too many colors.
• Ensures final output image quality.

General Optimization Strategy

For all image formats, we adopt the following general strategies:

1. Threshold Control

• Sets minimum compression threshold (50KB).
• Saves only when compression effect is significant.
• Avoids over-compression.

1. Performance Optimization

• Uses Utility Process for compression tasks.
• Controls concurrency based on CPU cores.
• Executes in batches during bulk processing.

Concurrency Control Implementation

When processing a large number of images, we use the p-limit library to control the number of concurrent tasks. The specific implementation is as follows:

1. Dynamic Concurrency Setting

// Determines concurrency based on CPU cores
const concurrency = Math.max(os.cpus().length - 1, 1);
const limit = pLimit(concurrency);

2. Task Queue Management

// Maps all image compression tasks to concurrency-limited Promises
const tasks = images.map((image) =>
  limit(async () => {
    try {
      const imageBuffer = await readFile(image);
      // ... Compression logic ...

      completed++;
      // Updates progress
      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;
    }
  })
);

Conclusion

In summary, we developed a practical feature in Eo2suite Desktop – Office document image compression. This feature directly addresses the issues of large document sizes and slow loading, making collaboration smoother for users.

References

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