圖像預處理以優化壓縮：最大化品質與效能
圖像預處理（Image Preprocessing）是影響 JPEG、PNG、WebP 和 GIF 檔案壓縮效率及最終圖像品質的關鍵步驟。恰當的預處理技術可在保持甚至提升圖像品質的同時，將檔案大小減少 20–50%，是優化圖像壓縮工作流程的必備技能。
理解預處理對壓縮的影響
預處理與壓縮的關係
圖像預處理為壓縮演算法創造了最佳條件，使其更高效地運作。透過去除冗餘資訊、整理資料結構和準備像素值，預處理有助於壓縮演算法獲得更佳結果。
預處理的主要優勢：
- 更高的壓縮比：檔案大小最多可減少 50%
- 更好的圖像品質：更好地保留關鍵細節
- 更少的壓縮雜訊（artifact）：減少壓縮帶來的失真
- 更佳的效能：壓縮與解壓速度更快
- 格式專屬優勢：針對不同格式量身優化
壓縮演算法的敏感性
不同壓縮演算法對預處理技術的反應各不相同：
const compressionSensitivity = {
JPEG: {
colorSpace: '影響極大——轉換為 YUV 至關重要',
blockAlignment: '對 8x8 DCT 區塊非常關鍵',
noiseReduction: '顯著提升壓縮效果',
sharpening: '對品質保持有中等影響'
},
PNG: {
paletteOptimization: '對索引圖像影響巨大',
filterOptimization: '對無損壓縮至關重要',
alphaChannel: '透明度處理的重要因素',
colorDepth: '直接影響檔案大小'
},
WebP: {
blockStructure: '對 VP8/VP8L 演算法很重要',
colorMapping: '對有損和無損都很關鍵',
edgePreservation: '對品質保持至關重要',
adaptiveBlocking: '提升壓縮效率'
},
GIF: {
colorQuantization: '基本要求',
ditheringStrategy: '對品質影響極大',
paletteOrdering: '影響壓縮比',
frameOptimization: '對動圖尤為重要'
}
};
最佳圖像縮放策略
解析度與寬高比優化
正確的縮放是影響壓縮優化效果最大的預處理技術。
智慧縮放演算法
class ImageResizer {
constructor() {
this.algorithms = {
bicubic: this.bicubicInterpolation,
lanczos: this.lanczosResampling,
mitchell: this.mitchellFilter,
catmullRom: this.catmullRomSpline
};
}
optimizeForCompression(image, targetFormat, quality) {
const analysis = this.analyzeImage(image);
// 確定最佳尺寸
const targetDimensions = this.calculateOptimalDimensions(
image,
targetFormat,
analysis
);
// 根據內容選擇合適演算法
const algorithm = this.selectResizingAlgorithm(analysis, targetFormat);
// 依內容縮放圖像
return this.resize(image, targetDimensions, algorithm);
}
calculateOptimalDimensions(image, format, analysis) {
const { width, height } = image.dimensions;
const aspectRatio = width / height;
// 針對不同格式優化
const formatOptimization = {
JPEG: this.optimizeForJPEG(width, height, analysis),
PNG: this.optimizeForPNG(width, height, analysis),
WebP: this.optimizeForWebP(width, height, analysis),
GIF: this.optimizeForGIF(width, height, analysis)
};
return formatOptimization[format];
}
optimizeForJPEG(width, height, analysis) {
// 對齊到 8x8 區塊以獲得最佳 DCT 效果
const blockAlignedWidth = Math.round(width / 8) * 8;
const blockAlignedHeight = Math.round(height / 8) * 8;
// 考慮色度子取樣的影響
if (analysis.chromaComplexity < 0.3) {
// 簡單圖像適合 4:2:0 對齊
return {
width: Math.round(blockAlignedWidth / 2) * 2,
height: Math.round(blockAlignedHeight / 2) * 2
};
}
return { width: blockAlignedWidth, height: blockAlignedHeight };
}
optimizeForPNG(width, height, analysis) {
// PNG 受益於適合 filter prediction 的尺寸
const filterOptimalWidth = this.calculateFilterOptimalWidth(width);
if (analysis.colorCount <= 256) {
// 調色盤圖像優化 LZW
return this.optimizeForPalette(width, height);
}
return { width: filterOptimalWidth, height };
}
}
內容感知縮放
function contentAwareResize(image, targetDimensions) {
const importanceMap = generateImportanceMap(image);
const resizingStrategy = {
// 保留關鍵區域
preserveRegions: findCriticalRegions(importanceMap),
// 對不重要區域強力壓縮
compressibleRegions: findCompressibleRegions(importanceMap),
// 使用 seam carving 智慧裁切
seamCarvingPaths: calculateOptimalSeams(image, importanceMap)
};
return applyContentAwareResize(image, targetDimensions, resizingStrategy);
}
function generateImportanceMap(image) {
const maps = {
// 邊緣偵測用於結構重要性
edgeMap: detectEdges(image, 'canny'),
// 人臉偵測用於人像重要性
faceMap: detectFaces(image),
// 顯著性偵測用於視覺重要性
saliencyMap: detectSaliency(image),
// 文字偵測用於內容重要性
textMap: detectText(image)
};
// 按權重合併重要性圖
return combineImportanceMaps(maps, {
edges: 0.3,
faces: 0.4,
saliency: 0.2,
text: 0.1
});
}
色彩空間優化
針對格式選擇色彩空間
在壓縮前選擇最佳色彩空間可大幅提升結果。
JPEG 色彩空間優化
class JPEGColorSpaceOptimizer {
constructor() {
this.colorSpaces = ['RGB', 'YUV', 'LAB', 'HSV'];
}
optimizeColorSpace(image, compressionSettings) {
const analysis = this.analyzeColorDistribution(image);
// 照片預設 YUV
if (analysis.photographicScore > 0.7) {
return this.convertToYUV(image, {
chromaSubsampling: this.selectChromaSubsampling(analysis),
gammaCorrection: this.calculateOptimalGamma(image)
});
}
// 高色彩精度需求用 LAB
if (analysis.colorAccuracyRequirement > 0.8) {
return this.convertToLAB(image, {
preserveColorAccuracy: true,
optimizeForCompression: false
});
}
// 圖形和文字多的用 RGB
return this.optimizeRGB(image, analysis);
}
selectChromaSubsampling(analysis) {
const chromaComplexity = analysis.chromaComplexity;
if (chromaComplexity < 0.2) return '4:2:0'; // 強子取樣
if (chromaComplexity < 0.5) return '4:2:2'; // 中等子取樣
return '4:4:4'; // 複雜色度不取樣
}
convertToYUV(image, options) {
const yuvImage = {
Y: new Array(image.width * image.height),
U: new Array(image.width * image.height),
V: new Array(image.width * image.height)
};
for (let i = 0; i < image.pixels.length; i += 4) {
const r = image.pixels[i];
const g = image.pixels[i + 1];
const b = image.pixels[i + 2];
// ITU-R BT.601 轉換
const y = 0.299 * r + 0.587 * g + 0.114 * b;
const u = -0.147 * r - 0.289 * g + 0.436 * b + 128;
const v = 0.615 * r - 0.515 * g - 0.100 * b + 128;
const pixelIndex = Math.floor(i / 4);
yuvImage.Y[pixelIndex] = Math.round(y);
yuvImage.U[pixelIndex] = Math.round(u);
yuvImage.V[pixelIndex] = Math.round(v);
}
return this.applyChromaSubsampling(yuvImage, options.chromaSubsampling);
}
}
PNG 色深優化
class PNGColorOptimizer {
optimizeColorDepth(image) {
</rewritten_file>