大部分的格式建議都寫成排名:WebP 贏 JPEG、AVIF 贏 WebP、要透明就用 PNG。排名好記,但經常是錯的,因為該用哪個格式取決於圖片裡面有什麼,不是取決於它現在叫什麼名字。
所以我們不爭論,直接量。我們把同一組公開的測試檔跑過站上 38 個轉換器,記下每一個輸出位元組 —— 總共 98 筆。這一篇是那張表的實務讀法。下面每一個數字都來自真實瀏覽器裡的真實轉換,而你可以下載同一組測試檔自己重跑。
第一步:你的圖裡面是什麼?
在選格式之前,先把你的檔案歸到下面五類。這一個問題對結果的預測力,比任何格式排名都準。
| 類別 | 怎麼判斷 | 典型內容 |
|---|---|---|
| 照片 | 放大看 —— 邊緣是柔的,到處都有顆粒 | 相機照片、商品照 |
| 截圖 | 大面積純色、1 像素的銳利邊框、有文字 | 應用程式與網頁截圖 |
| 平面插畫 | 只有幾個純色,完全沒有漸層 | 圖表、示意圖、簡單插畫 |
| 透明標誌 | 顏色很少、邊緣銳利、背景是棋盤格 | 圖示、徽章、貼圖 |
| 掃描檔 | 從掃描器來的,通常又大又沒壓縮 | TIFF 與 BMP 文件 |
照片:JPG 或 WebP,沒有第三個選項
這是唯一一類「流行建議剛好是對的」。測試照片存成 PNG 是 1.88 MB,轉出來變成 JPG 288.4 KB(−85%)與 WebP 303.1 KB(−84%)。如果它原本是 2.75 MB 的未壓縮 BMP 或 TIFF 掃描檔,轉 JPG 直接到 288.4 KB,少了 90%。
數字真正在警告的是反方向。照片進到無損格式會爆掉:
- JPG 轉 PNG:330.2 KB → 2.07 MB(+542%)
- WebP 轉 PNG:351.5 KB → 2.15 MB(+527%)
- JPG 描邊成 SVG:330.2 KB → 7.49 MB(+2224%)
而這些都救不回畫質。有損編碼丟掉的東西已經沒了,無損格式只是把剩下的原價存起來,連壓縮痕跡一起存。照片轉 PNG 只有一個理由:你接下來要編輯它。
已經是 JPG、想要它更小?重新編碼成 WebP 在我們的照片上只省了 9%(330.2 KB → 301.9 KB),因為那個 JPEG 本來就壓得不差。改用壓縮效果好多了(−46%),而縮到寬 800 px直接腰斬。
截圖:走 WebP,JPG 是個陷阱
這一類的排名整個翻過來,而且很多人踩。18.0 KB 的 PNG 截圖轉成 JPG 是 43.5 KB,大了 142%。JPEG 得花位元去模糊那些 PNG 幾乎免費就存好的銳利邊框,所以你付更多錢、文字還變糊。
正確答案是 WebP:同一張截圖轉出來 7.3 KB(−59%)。如果來源是一張過胖的 JPG 截圖,省的幅度很誇張:45.3 KB → 7.3 KB(−84%)。而如果你手上是 2.75 MB 的 BMP 截圖,BMP 轉 WebP 給出 7.3 KB,相對原檔幾乎是進位誤差的等級。
要避開的是回頭路。7.3 KB 的 WebP 截圖轉成 PNG 出來是 82.3 KB,大了 1034%,因為 PNG 必須忠實存下 WebP 產生的壓縮雜訊。
平面插畫:WebP 最好,但 JPG 沒你想的那麼糟
平面圖幾乎到哪都壓得好。34.7 KB 的插畫轉 WebP 是 10.2 KB(−71%);而出乎意料的是,轉 JPG 是 24.1 KB(−30%)—— 這是真的省到,和截圖那個案例不同,因為大面積純色讓 JPEG 沒什麼可以模糊的。如果這張圖是要當圖示,PNG 轉 ICO 把它壓到 1.3 KB(−96%)。
描邊成 SVG 是那個看起來很誘人、實際上通常反效果的選項:同一張插畫變成 117.0 KB(+238%),因為每一塊顏色都變成一條路徑。
透明標誌:絕對不要 JPG
JPG 沒有 alpha 通道,透明會被填成白色 —— 測試的透明標誌在每一次 JPG 轉換後,背後都多了一塊白底。有效的做法是:
- PNG 轉 ICO:28.8 KB → 951 B(−97%)
- PNG 描邊成 SVG:28.8 KB → 1.7 KB(−94%),而且可以無限放大
- PNG 轉 WebP:28.8 KB → 7.5 KB(−74%),透明保住
那個 SVG 結果是整張表裡描邊唯一大獲全勝的一次,而它正好就是描邊被設計出來要處理的情況:顏色少、邊緣銳利。
一個誠實的例外。一張 4.3 KB 的透明 GIF 轉 WebP 變成 5.4 KB(+27%)。面對一個這麼小的檔案,現代編碼幾乎沒有東西可以搶回來。但它仍然比其他選項好太多 —— 同一張 GIF 轉 PNG 是 26.0 KB(+507%)、轉 JPG 是 17.3 KB(+304%)。
掃描檔:該轉什麼取決於你掃了什麼
我們的 BMP 與 TIFF 測試檔全部剛好是 2.75 MB,因為兩者都存原始像素。不論怎麼轉省下的都非常多,但正確的目標會隨內容翻轉:
| 掃的是什麼 | 最佳目標 | 結果 |
|---|---|---|
| 照片 | JPG | 2.75 MB → 288.4 KB(−90%) |
| 文字或線稿 | PNG | 2.75 MB → 22.9 KB(−99%),而且無損 |
第二列才是真正有用的:掃描文件走 TIFF 轉 PNG,既比 JPG 版更小,又是像素精確的。掃描照片剛好相反 —— PNG 只到 2.25 MB(−18%),因為 PNG 壓不掉照片的顆粒。
向量與現代編碼:兩個特例
來源是 SVG 時,檔案大小是由你選的寬度決定的,不是由格式決定。574 位元組的測試 SVG 在預設 512 px 寬下,轉出來是 WebP 6.6 KB、JPG 13.2 KB、PNG 17.9 KB。先想清楚你真正需要的最大尺寸。
來源是 AVIF 時,你是在離開整張表裡效率最高的編碼,所以每一個出口都要付錢。1200 × 800 的介面截圖用 AVIF 只要 1,472 位元組;同一張圖轉 WebP 是 6.9 KB(+378%)、轉 JPG 是 43.7 KB(+2942%)、轉 PNG 是 36.5 KB(+2442%)。把 AVIF 留著,拿 WebP 當備用檔,而不是取代它。
PDF:重量跟著內容,不跟著頁數
PDF 那批數字反覆講同一件事。從五頁的測試文件抽出第 3 頁(整頁照片)是 331.2 KB,抽出第 4 頁(純文字)是 1.4 KB。刪掉那個文字頁,檔案從 334.1 KB 變成 333.3 KB,幾乎沒差;刪掉照片頁,剩 3.4 KB。
所以:合併不會讓檔案變小(進去 336.9 KB,出來 336.0 KB),旋轉則完全不改變大小(334.1 KB 進、334.1 KB 出,因為它只是設一個標記)。真的需要小一點,壓縮把我們的測試文件砍一半到 167.6 KB —— 它重新編碼的是圖片、不動文字,這也意味著一份通篇只有文字的 PDF 幾乎沒東西可擠。
實測教我們的三件事
有損轉無損的代價,永遠比大家以為的高。 不是多 20%,是多 500% 到 2700%。如果你發現自己在轉 PNG,先確認你真的需要無損編輯、透明或像素精確 —— 那些都是好理由。「畫質比較好」不是理由,因為畫質早就沒了。
「哪個格式比較小」是個沒有答案的問題。 來源是 PNG、JPG、BMP、TIFF 時,WebP 都贏過輸入;然後一張 4.3 KB 的透明 GIF 讓它大了 27%。同樣一個 JPG 轉 PNG,在截圖上是 +61%、在照片上是 +542%。是內容在決定,不是格式的名字。
實測推翻了我們自己已經發布的說法,五次。 我們曾經寫過 PDF 頁面轉 PNG 比 JPG 小(在文字頁上不是)、GIF 轉 PNG 只會「大一點」(+125% 與 +507%)、GIF 轉 WebP 比另外兩者都小(透明標誌 +27%)、AVIF 轉 WebP 只是「略大一點」(+92% 到 +378%),以及 WebP 從沒比輸入大過。五個現在都改掉了。這正是實測室存在的理由,也是測試檔要公開的理由:讓數字可以被查證,而不是被相信。