深度解析

WebP 與 JPG 對決:有損照片格式該選哪個

koboshiCo-founder
·2 分鐘閱讀
概述

WebP 和 JPG 都是有損照片格式,但一個是 2010 年的技術,一個是 1992 年的技術。WebP 贏在體積和功能,JPG 贏在絕對無處不在。本文給出技術比較和一條明確的選擇規則。

本教學使用免費的批次 WebP 轉 JPG——它完全在你的瀏覽器中執行。開啟工具

簡短答案:比單位位元組的畫質,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 劣化成平滑而不是方塊——仍然是劣化,但是更安靜的那種。對縮圖和預覽圖來說,位元組最要緊、審視最少,這種行為比標題裡的百分比更值錢。

體積比較表

同一張照片,主觀畫質對齊:

照片JPGWebP(有損)
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
標誌、去背圖、一切透明元素WebPJPG 做不了 alpha
母版的長期存檔都不用——保留原圖,或走無損兩種格式都會丟資料

當你需要轉換時

如果網站塞給你的 WebP 檔案需要在更老的環境裡運作,WebP 轉 JPG 在你的瀏覽器本機完成轉換——支援批次和 ZIP 下載,沒有任何上傳;詳細步驟見 如何將 WebP 轉成 JPG。反方向,JPG 轉 WebP 能在照片上網之前削掉三分之一體積。

從以上內容得出的規則:拍攝和傳送用 JPG,發布用 WebP——在兩個世界的邊界處轉換。

準備好試試看了嗎?

免費且不限次數。無需上傳、無需註冊——你的檔案永遠不會離開你的裝置。

開啟批次 WebP 轉 JPG

更多推薦閱讀