圖片優化是前端效能與視覺品質的平衡術。理解位圖原理與壓縮機制，才能在檔案大小與畫質間找到最佳平衡點。

位圖基礎：像素的世界

JPG、PNG、GIF 皆為位圖，由像素矩陣構成。放大時可見方塊狀像素。優化本質上都是圍繞「像素顏色值」進行：如何用最少數據表達最接近原貌的圖像。

JPG：有損壓縮的藝術

核心流程：DCT → 量化 → 掃描

1. 色彩空間轉換 (YCbCr)： 將 RGB 轉為亮度 (Y) 與色度 (Cb, Cr)。人眼對亮度敏感、對色度鈍感，故可對色度進行下採樣 (4:2:2 或 4:2:0)，資訊量減 1/3 至 1/2，畫質幾無損失。
2. 8×8 區塊 DCT 離散餘弦變換： 將空間訊號轉為頻率係數。低頻含主要能量，高頻能量低且人眼不敏感。
3. 量化： 以量化表除以係數並四捨五入。高頻係數多變為 0，實現壓縮，但此步不可逆，造成失真。品質參數實際控制量化表步長。
4. 鋸齒掃描： 將零值係數串聯，配合霍夫曼編碼進一步壓縮。

實戰優化三大鐵律

1. 對齊 8 像素網格

JPG 以 8×8 區塊獨立壓縮。圖形邊緣若落在區塊邊界，壓縮器會在黑白間尋找平衡產生雜訊。關鍵元素對齊 8px 網格 (或 16/32px 倍數)，銳利度明顯提升，檔案更小。

2. 品質值避開 51 以下

PS 品質 51 以下會啟動「色度下採樣」，邊緣產生嚴重色噪。小尺寸高對比圖片，品質勿低於 51；一般情況 60-80 區間最划算，95 以上屬過度優化。

3. Lab 模式保亮度、壓色度

轉 Lab 模式，對 a、b 通道(色度)施加濾鏡 → 雜色 → 中間值，平滑色度雜訊；L 通道(亮度)保持銳利。利用人眼對亮度敏感、色度鈍感的特性，以最小代價換取最大壓縮。

PNG：無損壓縮的策略

PNG 採 LZ77 + 線性預測過濾 (Sub, Up, Average, Paeth)。垂直方向像素值相同 時，Up 過濾極其高效。優化關鍵在於：

• 索引色 vs 真彩色： 256 色內用 PNG-8，超過用 PNG-24。
• 減少顏色數： 合併相近色、去除無用透明度。
• 選擇最佳過濾器： 讓壓縮器自動嘗試 5 種過濾器取最優。
• 避免隔行掃描 (Adam7)： 除非需要漸進顯示，否則增加體積。

掌握底層原理，優化不再是玄學，而是可控、可預測的工程決策。下次導出圖片前，先問自己：這張圖適合 JPG 還是 PNG？關鍵像素對齊了嗎？品質值設在安全區了嗎？