PNG 圖像壓縮：無損最佳化的進階技術

PNG（可攜式網路圖形，Portable Network Graphics）已成為需要透明度、銳利邊緣與無損品質的網頁圖形黃金標準。然而，PNG 檔案通常比其他圖像格式大得多，因此 PNG 壓縮對網站效能至關重要。本指南將詳細說明在完全保留圖像品質的前提下，減少 PNG 檔案大小的進階技術。

理解 PNG 圖像格式

PNG 壓縮基礎

PNG 採用兩步驟無損壓縮流程，這使其有別於其他網頁圖像格式：

預先過濾（Pre-filtering）：減少像素資料的冗餘
DEFLATE 壓縮：標準 ZIP 類壓縮演算法

這種無損方式代表 PNG 壓縮絕不會降低圖像品質，適用於：

Logo 與圖形：銳利邊緣、純色
螢幕截圖：文字與介面元素
透明圖像：保留 alpha 通道
專業攝影：對品質要求極高的情境

PNG 與其他圖像格式比較

了解何時選擇 PNG 而非其他格式非常重要：

不同用途下的格式比較：
- PNG：無損，支援透明，檔案較大
- JPEG：有損，不支援透明，照片檔案較小
- WebP：有損/無損，支援透明，壓縮更佳
- GIF：色彩有限，支援動畫，最佳化後仍大於 PNG

PNG 圖像類型與壓縮策略

PNG 色彩類型

不同的 PNG 色彩類型需採用不同的最佳化方法：

灰階（類型 0）：

每像素 1、2、4 或 8 位元
適用：黑白圖像、簡單圖形
策略：調色盤最佳化

RGB（類型 2）：

每像素 24 位元（每通道 8 位元）
適用：無透明的全彩圖像
策略：濾鏡最佳化

調色盤（類型 3）：

每像素 1、2、4 或 8 位元，含調色盤
適用：≤256 色的圖像
策略：減少顏色並最佳化調色盤

帶 alpha 的灰階（類型 4）：

每像素 16 位元（8 + 8 alpha）
適用：帶透明的灰階圖像
策略：alpha 通道最佳化

帶 alpha 的 RGB（類型 6）：

每像素 32 位元（8+8+8+8）
適用：帶透明的全彩圖像
策略：RGB 與 alpha 聯合最佳化

PNG 進階壓縮技術

濾鏡方法最佳化

PNG 濾鏡在壓縮前減少冗餘。最佳濾鏡取決於圖像內容：

// 濾鏡類型及適用情境
const pngFilters = {
  'none': {
    id: 0,
    bestFor: '隨機或有雜訊的圖像',
    description: '不使用濾鏡'
  },
  'sub': {
    id: 1,
    bestFor: '橫向圖案',
    description: '與左側像素做差'
  },
  'up': {
    id: 2,
    bestFor: '縱向圖案',  
    description: '與上方像素做差'
  },
  'average': {
    id: 3,
    bestFor: '大多數圖像',
    description: '左側與上方像素的平均值'
  },
  'paeth': {
    id: 4,
    bestFor: '複雜圖案與紋理',
    description: 'Paeth 預測演算法'
  }
}

function selectOptimalFilter(imageType, content) {
  if (content.includes('horizontal_lines')) return pngFilters.sub
  if (content.includes('vertical_lines')) return pngFilters.up
  if (content.includes('complex_texture')) return pngFilters.paeth
  return pngFilters.average // 預設適用於大多數情境
}

顏色減少策略

減少顏色數量可大幅降低 PNG 檔案大小：

基於調色盤的最佳化：

可行時將 RGB 轉為索引色
分析圖像中的唯一顏色
使用自適應調色盤以獲得最佳品質

量化技術（Quantization）：

顏色減少方法：
1. Median Cut：依分布劃分色彩空間
2. Octree：樹狀顏色分群
3. K-means：統計分群
4. Neuquant：神經網路量化

alpha 通道最佳化

透明 PNG 通常包含不必要的 alpha 資料：

Alpha 預乘（premultiplication）：

移除隱藏色彩資料以減小檔案體積
對大面積透明區域效果顯著

alpha 二值化：

將半透明像素轉為全透明或全不透明
對簡單透明場景可大幅減小體積

線上 PNG 壓縮工具

Web 端 PNG 最佳化

現代線上工具專為 PNG 最佳化設計：

PNG 壓縮主要特性：

無損最佳化：完全保留畫質
調色盤顏色減少：自動去除多餘顏色
移除中繼資料：刪除無用資訊
濾鏡最佳化：選擇最佳濾鏡
保留透明度：alpha 通道不變

批次處理 PNG

對於大量 PNG 檔案，選擇具備以下功能的工具：

批次上傳：一次處理數百張圖片
統一設定：對所有圖片套用相同最佳化
進度追蹤：監控處理過程與結果
下載選項：單檔或 ZIP 包

不同情境下的 PNG 壓縮

網頁圖形與 UI 元素

對於網站與應用，PNG 壓縮的目標是載入速度：

圖示與按鈕：

目標大小：每個圖示小於 5KB
最佳化方式：轉為調色盤模式
顏色限制：16–64 色足夠大多數情境

Logo 壓縮：

/* PNG logo 的 CSS 最佳化 */
.logo {
  /* 使用合適尺寸避免瀏覽器縮放 */
  width: 200px;
  height: auto;
  
  /* 渲染最佳化 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

/* 響應式載入 logo */
@media (max-width: 768px) {
  .logo {
    content: url('logo-small.png'); /* 行動裝置小尺寸 PNG */
  }
}

螢幕截圖最佳化

螢幕截圖通常包含大面積單色區域：

文字較多的截圖：

使用 ≤256 色調色盤模式
截圖後最佳化 PNG
可考慮 WebP 以獲得更佳壓縮

UI 截圖：

僅裁切必要元素
使用統一背景色
用於文件前先最佳化

透明圖像壓縮

透明度增加複雜性但可最佳化：

帶透明的商品圖：

移除不必要的透明區域
可行時使用二值 alpha
同時提供不透明版本

疊加圖形：

最小化透明區域
使用統一 alpha 值
在不同背景下測試

PNG 最佳化的技術設定

壓縮等級調整

PNG 壓縮等級從 0（無壓縮）到 9（最高）：

壓縮等級建議：
- 6 級：Web 推薦，速度與壓縮平衡
- 7–8 級：最終檔案更高壓縮
- 9 級：封存或慢速網路下最大壓縮
- 自動：讓工具依圖像特性選擇

chunk 最佳化

PNG 檔案包含多種可最佳化的資料區塊：

必要 chunk：

IHDR：圖像標頭（始終需要）
IDAT：圖像資料（壓縮像素）
IEND：圖像結束

可移除的選用 chunk：

tEXt：註解與中繼資料
tIME：修改時間
gAMA：伽瑪校正
cHRM：色彩空間資訊

進階濾鏡選擇

為每一條掃描線選擇合適的濾鏡：

免費圖片壓縮

PNG圖像壓縮：無損優化的高級技術