WebP 與 PNG 正面對決：體積、透明度與各自的主場

簡短答案：比檔案體積，WebP 幾乎總是贏；比相容性和編輯工作流程，PNG 幾乎總是贏。正確的問題不是哪個格式更好，而是你在做什麼工作。但「看情況」只有在你知道為什麼看情況之後才有用，而這取決於兩種格式的壓縮方式。

兩種格式分別怎麼壓縮

PNG 只做一件事：無損壓縮。每一行像素先經過一個預測濾鏡，讓資料盡可能重複，然後 DEFLATE——ZIP 檔案裡那套 LZ77 加霍夫曼編碼家族——把結果壓緊。每個像素逐位元存活。PNG 在九十年代中期作為 GIF 的免專利替代品設計出來，PNG 的誕生 解釋了它為什麼造得這麼保守。

WebP 做兩件事，因為它本質上是兩個共用一個副檔名的格式。有損 WebP 是 VP8，來自 Google 影片壓縮專案的畫框內編碼器——基於區塊、在頻域運作，哲學上是 JPEG 的表親。無損 WebP 是 VP8L，一個專門打造的無損編碼器，有自己的熵編碼、色彩變換和空間預測。Google 在 2010 年發布了整套東西，WebP 的誕生 有完整的來龍去脈。

兩種格式都支援 alpha 透明度，但方式不同。PNG 把 alpha 作為與紅、綠、藍並列的第一類通道。有損 WebP 則把 alpha 作為一個獨立的、無損編碼的通道掛在有損色彩資料旁邊——於是你得到一張壓縮過的照片配上銳利的透明輪廓，這是 JPG 和裸 VP8 各自都做不到的。如果兩種壓縮哲學之間的差別還不清晰，我們的 有損與無損壓縮詳解 講了基礎知識。

體積的現實

Google 自己的基準測試聲稱，無損 WebP 在同樣的影像上比 PNG 小約 26%。在真實圖形上，這個數字站得住：

有兩點很醒目。第一，無損 WebP 在 PNG 自己的主場——截圖、標誌、純色圖形——以穩定優勢擊敗 PNG，因為 VP8L 的預測器和熵編碼器領先 DEFLATE 一代。第二，真正拉開差距的是有損那一欄：一張有損 WebP 照片比 PNG 小一個數量級。對應的 JPG 比較我們在 JPG 與 PNG 裡做過，網頁圖片格式指南 畫出了三種格式各自的位置。

PNG 仍然贏的地方：瀏覽器之外的一切

每個現代瀏覽器多年前就能渲染 WebP 了。這句話很有分量，因為一旦跨出瀏覽器，WebP 的支援就開始漏風。舊版 Photoshop 需要外掛。一些 CMS 上傳表單和電商上架工具直接拒收 .webp。老作業系統上的桌面看圖軟體對它聳肩。辦公套件、印刷廠和嵌入式系統落後得更遠。

PNG 沒有這些煩惱。從上世紀九十年代末起它就到處可讀——每個影像編輯器、每個作業系統、每套辦公軟體、每條印刷流程。當有人說一個檔案「就是能開啟」時，他們形容的通常是 PNG 或 JPG。

工作流程的問題

這是大多數比較文章跳過的部分。PNG 不只是遞送格式，它是預設的中間格式。它在哪裡都能開啟，重複儲存永不劣化，任何流程裡的任何工具都接受它。這就是為什麼即使最終資產以 WebP 交付，設計師也用 PNG 輸出工作檔案。

合理的工作流程是這樣的：用 PNG（或 PSD 這類真正的工作格式）編輯和存檔，然後為網站輸出 WebP。WebP 是運輸貨櫃，PNG 是工作坊。這個決定在網站場景下的版本，網站該用 PNG 還是 WebP 講得更深，WebP 與 JPG 比較 則涵蓋了照片那一側。

什麼場景用哪個

當你需要轉換時

如果一個 WebP 檔案被上傳表單或舊軟體擋了回來，WebP 轉 PNG 在你的瀏覽器本機完成轉換——透明度原樣保留，沒有任何上傳；詳細步驟見 如何將 WebP 轉成 PNG。反方向，PNG 轉 WebP 通常能在圖形上頁之前削掉四分之一甚至更多的體積。兩個工具都完全在你的裝置上運作。

從以上內容得出的規則：母版留 PNG，上網發 WebP，外部世界不配合時就按需轉換。