壓縮技術

Google 會持續設法加快網頁載入速度。 其中一個做法是縮小網頁圖片。大多數網頁上的圖片最多可達 60% 至 65% 的位元組，而網頁大小是總轉譯時間的主要因素。頁面大小對於行動裝置尤其重要，因為較小的圖片可以節省頻寬和電池續航力。

WebP 是 Google 開發的一種新圖片格式，並且支援 Chrome、Opera 和 Android 且經過最佳化處理，可在網路上提供更快、更小的圖片。與同等視覺品質的 PNG 和 JPEG 圖片相比，WebP 圖片大小約小 30%。此外，WebP 圖片格式的功能與其他格式相同。包括：

  • 遺失壓縮：有損壓縮是以 VP8 主要影格編碼為基礎。VP8 是由 On2 Technologies 建立的影片壓縮格式，可做為 VP6 和 VP7 的後續支援。

  • 無壓縮壓縮：無損壓縮格式由 WebP 團隊開發。

  • 透明度：8 位元 Alpha 版本適用於圖像圖片。Alpha 版可與失真 RGB 搭配使用，後者目前不支援其他格式。

  • 動畫：支援真實色彩的動畫圖片。

  • 中繼資料：檔案可能包含 EXIF 和 XMP 中繼資料 (例如相機使用)。

  • 色彩設定檔：這類設定檔可能內嵌 ICC 設定檔。

由於圖片壓縮效果已更好，且支援所有功能，WebP 非常適合大多數圖片格式：PNG、JPEG 或 GIF。更棒的是，您是否知道 WebP 能夠提供新的圖片最佳化機會，例如支援透明有失真圖片的有損圖片？有！WebP 是採用圖片格式的 瑞士 Army 刀

這項功能是怎麼做到的？讓我們來一探究竟。

有損 WebP

WebP 的有損壓縮方法與 VP8 相同，用於預測 (影片) 影格。VP8 是以區塊預測為基礎，和任何區塊式轉碼器一樣，VP8 會將影格分割為稱為「巨集區塊」的較小片段。

在每個巨集區塊中，編碼器可根據先前處理的區塊預測多餘的動作和色彩資訊。圖片影格其實就是「關鍵」，它只會使用每個巨集區塊附近空間社區中已解碼的像素，並嘗試填入未知部分。這稱為預測程式設計 (請參閱 VP8 影片的內部影格編碼)。

這樣一來，備援資料就能從區塊中排除，提高壓縮效率。我們只會保留少許差異 (稱為殘差)，以壓縮形式傳輸。

在通過數學不可變的轉換 (著名的 DCT，代表「離散餘子轉換」轉換) 之後，剩餘值通常會包含許多零值，透過更有效率的方式壓縮。接著，結果會量化並以熵編碼。簡單地說，量化步驟是唯一捨棄位元遭到失真的步驟 (在下圖中搜尋 QPj 的除數)。所有其他步驟都會不可逆轉且不會失真！

下圖顯示 WebP 有損壓縮的相關步驟。與 JPEG 不同的功能會用紅色圈出。

WebP 使用區塊量化功能，並視情況將位元分配給不同的圖片片段：較少的熵區隔的位元數，而較高階的熵長度則較高。WebP 採用算術熵編碼，因此壓縮效果比 JPEG 使用的 Huffman 編碼更佳。

VP8 內部預測模式

VP8 內部預測模式可與三種巨集區塊搭配使用：

  • 4x4 鋁
  • 16x16 鋁
  • 8 x 8 色鍵

下列巨集區塊共用四種常見的預測內模式：

  • H_PRED (水平預測)。將左欄 (L.) 的複本填入區塊的每一欄。

  • V_PRED (產業預測)。將上方資料列 A 的副本填入區塊的每一列。

  • DC_PRED (DC 預測)。使用 A 上列的像素平均值與 L 左側的資料欄，將區塊填入單一值。

  • TM_PRED (TrueMotion 預測)。這種模式從 On2 Technologies 開發的壓縮技術取得名稱。除了 A 列和 L 欄外，TM_PRED 還會使用區塊上方的像素 P。A 中的像素 (從 P 開始) 之間的水平差異會使用從 L 開始的像素開始傳播。

下圖說明 WebP 有損壓縮時使用的各種預測模式。

針對 4x4 luma 區塊，還有六種與 V_PRED 和 H_PRED 類似的內層模式，但這些模式可對應不同方向的像素預測。如要進一步瞭解這些模式，請參閱 VP8 Bitstream 指南。

自動調整區塊量化

為了改善圖片品質，系統會將圖片劃分為具有相似特徵的區域。針對這些片段，壓縮參數 (量化步驟、篩選強度等) 會獨立調整。將位元重新分配到最適合的地方，就能產生有效率的壓縮。VP8 最多可以有四個片段 (VP8 位元串流的限制)。

為什麼 WebP (有損) 比 JPEG 更好

預測編碼是 WebP 勝過 JPEG 的主要原因。區塊自動調整量化也大有助益。這項功能有助於減緩位元率。布林算術編碼提供 5% 至 10% 的壓縮，與 Huffman 編碼相比。

無損 WebP

WebP-無損編碼是以運用多種不同技術來轉換圖片為基礎。然後對轉換參數執行熵編碼，以及轉換後的圖片資料。套用至圖片的轉換包括像素空間預測、色域轉換、使用本機的調色盤、將多個像素封裝為一個像素，以及 Alpha 替代值。針對熵編碼，我們會使用 LZ77-Huffman 編碼變化版本，其使用距離值的 2D 編碼和精簡的稀疏值。

預測者 (空間) 轉換

空間預測功能透過鄰近像素通常彼此相關的事實，用來減少熵。在預測器轉換中，目前的像素值是根據已解碼的像素 (以掃描行順序) 進行預測，且只有殘差值 (實際 - 預測) 經過編碼。預測模式會決定要使用的預測類型。圖片會分割成多個正方形區域，而一個正方形中的所有像素都會採用相同的預測模式。

有 13 種可能的預測模式。舊版包括左、上方、左上和右像素。其餘的組合是左側、頂端、左上角和右上方的組合 (平均值)。

顏色 (去識別化) 轉換

色彩轉換的目標是裝飾每個像素的 R、G 和 B 值。色彩轉換會保持綠色 (G) 值不變，依據綠色轉換紅色 (R) 值，依據綠色，再依據紅色轉換藍色 (B)。

如同用於預測者轉換，先將圖片分成幾個區塊，區塊中的所有像素也都採用相同的轉換模式。每個區塊都有三種顏色轉換元素：green_to_red、green_to_blue 和 red_to_blue。

減去 Green 轉換

「減綠色轉換」會從每個像素的紅色和藍色值減去綠色值，有這項轉換時，解碼器需要在紅色和藍色中加入綠色值。這是上述一般顏色裝飾轉換的特殊案例，頻率夠高，足以保證遭到裁切。

色彩索引 (調色盤) 轉換

如果沒有唯一像素值，建立色彩索引陣列並利用陣列的索引取代像素值可能會更有效率。而色彩索引轉換可以達成這個目標。色彩索引轉換會檢查圖片中不重複 ARGB 值的數量。如果這個數字低於門檻 (256)，則會建立這些 ARGB 值的陣列，然後用來將像素值替換為對應的索引。

顏色快取編碼

無損 WebP 壓縮會使用已知的圖片片段來重新建構新的像素。如果系統找不到有趣的相符結果，也可以使用本機調色盤。系統會持續更新這個調色盤，重複使用最近的顏色。在下圖中，您可以看到本機色彩快取的實際更新情形，會在掃描向下時，隨著最近使用的 32 種顏色逐步更新。

LZ77 後端參考資料

反向參照是長度和距離碼的元組。長度代表掃描行順序中的像素數量。距離代碼是一個數字，指出系統先前顯示像素的位置，要從哪個位置複製像素。長度和距離值會使用 LZ77 前置字串編碼。

LZ77 前置字串編碼會將大型整數值分為兩個部分：前置字元和額外位元。前置字串會使用熵程式碼儲存，其他位元則會直接儲存 (沒有熵程式碼)。

下圖使用字詞比對 (而非像素) 來說明 LZ77 (2D 變化版本)。

有損 WebP (Alpha 版)

除了有損 WebP (RGB 顏色) 和無損 WebP (含 Alpha 色的無損 RGB) 之外，還有一種 WebP 模式支援 RGB 管道的有損編碼和 Alpha 通道的無損編碼。目前所有現有的圖片格式都不支援這類可能性 (有損 RGB 和無損 Alpha 值)。如今，需要透明度的網站管理員必須在 PNG 中無損編碼的圖片，否則大小會大幅增加。WebP Alpha 值能以每像素低位元進行圖片編碼，可讓您有效縮小這類圖片的大小。Alpha 通道的無損壓縮只會比有損 (品質 90) WebP 編碼增加 22% 位元組。

整體而言，以有損+ Alpha WebP 的方式取代透明 PNG 時，平均可省下 60-70% 的大小。事實證明，這是一個能吸引圖示豐富的行動版網站 (例如 everything.me) 的行動版網站。