PNG、JPG 與 WebP 比較

一句話版本

照片用 JPG，有銳利邊緣、文字或透明背景的內容用 PNG，目的地是網頁、而且您能掌控由什麼來開啟它時，用 WebP。如果其他都不記得，這條規則在絕大多數情況下都是對的。

JPG 為何仍無所不在

JPG 設計於 1992 年，基於一個特定的洞察：人眼對亮度比對色彩敏感得多，而且幾乎不會注意到繁複區域中的細微細節。JPG 會捨棄您最不可能察覺缺失的資訊，所以照片可以縮小到十分之一的大小，看起來仍然一模一樣。

同樣的手法也讓 JPG 在其他一切方面表現不佳。銳利的黑底白字正好落在這個格式處理得最差的邊界上，所以存成 JPG 的螢幕截圖，每個字母周圍都會出現髒髒的光暈。壓縮並沒有壞掉，它只是對從未為它設計的內容，精確地做了它被設計要做的事。

PNG 為何存在

PNG 是無損的。您放進去的每個像素都會原封不動地取回，不論您開啟並重新儲存多少次。它還有真正的 Alpha 通道，所以圖片的某些部分可以是真正透明的，而不是填上背景色。

代價是檔案大小。PNG 是藉由找出圖樣與重複來壓縮，對純色、標誌、圖表與螢幕截圖效果極佳，但對照片效果不佳，因為照片中每個像素都與相鄰像素略有不同。存成 PNG 的照片，大小很容易是 JPG 的五倍，卻沒有可見的好處。

WebP 真正勝出的地方

WebP 兩種工作都能做。它的有損模式在相同視覺品質下通常勝過 JPG，而支援透明的無損模式通常勝過 PNG。相較於 PNG，一般可節省 30% 到 70%。

問題不在瀏覽器，所有目前的瀏覽器都能讀取 WebP。問題在其他一切：較舊的桌面軟體、部分印表機、部分企業文件系統，以及一長串乾脆拒絕開啟該檔案的工具。如果您要發佈到網路，請用 WebP。如果您要把檔案寄給會用未知軟體開啟的人，就不要用。

幾乎每個人都會掉進去的陷阱

把 JPG 轉成 PNG 並不會恢復品質。它只是讓檔案從那一刻起變成無損，避免繼續受損，但原始 JPG 所捨棄的細節已永久消失，而 PNG 會忠實地把每一個壓縮瑕疵一併保存下來。結果是得到一個大得多、卻含有完全相同缺陷的檔案。

有用的推論是：如果您要反覆編輯一張圖片，請用 PNG 作業，並只在最後匯出一次 JPG。每一次以有損格式做中間儲存，都會累加損傷。

透明度會怎麼樣

只有 PNG、WebP、GIF 與 ICO 能承載透明度。把其中任何一種轉成 JPG 或 BMP，這些區域就必須變成某種顏色，因為該格式沒有地方可記錄「這裡什麼都沒有」。各工具選擇的顏色不同，令人意外地有不少選擇黑色，這會毀了標誌。本站刻意以白色填滿，這幾乎總是人們預期的結果。

實際運用：將 PNG 轉成 WebP 取得更輕量的網頁圖片，需要無損副本時將 JPG 轉成 PNG，或在不改變格式的情況下壓縮圖片。