簡短答案:比單位位元組的畫質,WebP 明顯勝過 JPG。比相容性,JPG 不可撼動——它在每台裝置、每個軟體、每家印刷廠都能開啟。所以「哪個更好」的答案是一個反問:這張圖要去哪裡?去你自己掌控的網站:WebP。去未知的地方:JPG。下面給出這個答案兩半各自的技術依據。
壓縮技術:1992 對 2010
JPEG 的核心手法可以追溯到 1992 年(JPG 的歷史講了完整故事)。影像被切成 8×8 像素的區塊,每塊做一次離散餘弦轉換轉成頻率,量化器丟掉人眼幾乎察覺不到的高頻細節。彩度解析度出於同樣的理由減半。這是撥接上網時代的傑出工程——從那以後沒有根本性的變化。
有損 WebP 是 VP8 的畫框內編碼,Google 於 2010 年發布(WebP 的誕生解釋了它如何從影片壓縮工作中誕生)。哲學相同——留下眼睛注意到的,丟掉其餘——但機器年輕了十八年。VP8 先從相鄰區塊預測每個區塊,再對剩餘差值做轉換;用更有效率的熵編碼器;按影像區域自適應調整量化強度,而不是全域一刀切。
可測量的結果:同等主觀畫質下,WebP 檔案比 JPG 小約 25% 到 35%。兩種格式都是有損的——每次儲存都會丟棄資訊——我們的 有損與無損壓縮詳解說明了這對編輯各自意味著什麼。
壓縮得越狠,差距越大。高畫質下兩者都不錯。把畫質調低,JPG 的 8×8 區塊會以可見的棋盤格失真浮出水面,而 WebP 劣化成平滑而不是方塊——仍然是劣化,但是更安靜的那種。對縮圖和預覽圖來說,位元組最要緊、審視最少,這種行為比標題裡的百分比更值錢。
體積比較表
同一張照片,主觀畫質對齊:
| 照片 | JPG | WebP(有損) |
|---|---|---|
| 1200 萬像素,全畫質 | 約 3.4 MB | 約 2.3 MB |
| 1920×1080,網頁遞送 | 約 450 KB | 約 300 KB |
| 縮圖,400 像素寬 | 約 35 KB | 約 24 KB |
頁面上每張圖省三分之一,累積起來很快——這就是網站如此激進地採用 WebP 的全部原因。乘上一整版商品圖,在中檔行動網路下就是載入兩秒和三秒的差別。
WebP 有而 JPG 永遠不會有的東西
JPG 的格式已經凍結;WebP 的容器留有成長空間。兩個功能值得一提:
Alpha 透明度。 有損 WebP 攜帶一個獨立編碼的 alpha 色版,照片可以坐在透明背景上。JPG 完全沒有 alpha——儲存時透明度會被壓到純色上。
動畫。 WebP 支援全彩加 alpha 的動畫,這讓它成為 GIF 的實用替代品。動畫 JPG 是不存在的東西。
對一張普通的照片,兩者都無所謂。一旦網站需要透明的產品去背圖或短循環片段,兩者就都重要了。
JPG 的護城河:永遠到處可用
JPG 從九十年代初起就可讀。每台相機都拍它。每支手機、每台印表機、每台電視、每個數位相框、每個用了二十年的 CMS 都讀它。拒收其他一切格式的上傳表單也接受 JPG。這不是能跑 benchmark 的功能——這是三十年積累下來的支援,沒有任何格式規格能複製它。
WebP 在每個現代瀏覽器裡渲染多年了,但跨出瀏覽器,支援迅速稀薄:老影像編輯器、年邁的 CMS、印刷流程、嵌入式裝置。我們在 WebP 與 PNG 比較裡從圖形一側畫過同一個缺口,在 JPG 與 PNG 比較裡從有損對無損一側也畫過。
什麼場景用哪個
| 圖片的去向 | 用哪個 | 原因 |
|---|---|---|
| 你自己控制的網站 | WebP | 同等畫質小約 30% |
| 郵件、即時通訊、未知收件人 | JPG | 人人都能開啟,無需解釋 |
| 印刷 | JPG | 印刷流程期待的就是它 |
| 你控制不了的上傳表單 | JPG | 很多仍然拒收 WebP |
| 標誌、去背圖、一切透明元素 | WebP | JPG 做不了 alpha |
| 母版的長期存檔 | 都不用——保留原圖,或走無損 | 兩種格式都會丟資料 |
當你需要轉換時
如果網站塞給你的 WebP 檔案需要在更老的環境裡運作,WebP 轉 JPG 在你的瀏覽器本機完成轉換——支援批次和 ZIP 下載,沒有任何上傳;詳細步驟見 如何將 WebP 轉成 JPG。反方向,JPG 轉 WebP 能在照片上網之前削掉三分之一體積。
從以上內容得出的規則:拍攝和傳送用 JPG,發布用 WebP——在兩個世界的邊界處轉換。