跳到主要內容

轉換實測室

幾乎每一篇談圖片格式的文章都會告訴你 WebP 比 PNG 小、JPG 比誰都小。本站以前的頁面也這樣寫過。問題是這種說法只對某些圖成立,而例外的幅度不小:在我們自己的 PNG → JPG 頁上,一張照片縮小 85%,但一張應用程式截圖卻脹大 142%。同一頁、同樣設定,結論完全相反。

所以我們不再「主張」,改成「量測」。下面列出的每一個轉換器,都用同一小組測試圖跑過,而那些頁面上印的檔案大小,就是工具在真實瀏覽器裡實際吐出來的位元組。這一頁說明怎麼做的、哪些刻意沒測,以及你想驗證我們的數字時去哪裡拿測試檔。

測試檔

一份實測有多誠實,取決於它的輸入。我們刻意不用市面上的圖庫照片:那有授權問題、不能重新公開,而且「別人重現不了的數字」不算證據。四張圖全部由腳本從零畫出來,隨機種子是固定的,所以每次跑出來的位元組完全相同——而且每一個來源檔都在下面提供下載。每張圖都是為了打破一種不同的壓縮假設而挑的。

類照片

類照片

柔和漸層加上細絲與顆粒雜訊 —— 真實照片才有的高頻細節。

下載: PNG 1.88 MB JPG 330.2 KB JFIF 330.2 KB WEBP 351.5 KB BMP 2.75 MB TIFF 2.75 MB AVIF 122.3 KB HEIC 886.6 KB

介面截圖

介面截圖

大面積純色配上 1 像素的銳利邊框,就像應用程式的截圖。

下載: PNG 18.0 KB JPG 45.3 KB JFIF 45.3 KB WEBP 7.3 KB BMP 2.75 MB TIFF 2.75 MB GIF 10.2 KB AVIF 1.4 KB HEIC 21.9 KB

平面插畫
透明標誌

透明標誌

銳利邊緣、顏色很少,而且背景是透明的。

下載: PNG 28.8 KB WEBP 7.6 KB GIF 4.3 KB HEIC 25.1 KB

向量圖

向量圖

手寫的 SVG:幾個純色圖形加一條曲線,全部只有 574 位元組的文字。

下載: SVG 574 B

5 頁混合 PDF

5 頁混合 PDF

四頁純文字加一頁整頁照片,所以頁與頁之間的「重量」差異極大。

下載: PDF 334.1 KB

3 頁純文字 PDF

3 頁純文字 PDF

通篇只有文字 —— 合併測試用的第二個檔。

下載: PDF 2.8 KB

這些數字是怎麼跑出來的

整個過程沒有任何一步是估算。每一張表的每一列,腳本都會:

  1. 在瀏覽器 canvas 上畫出測試圖並寫到磁碟;
  2. 開啟已部署版本裡真正的 /convert/… 頁面;
  3. 把檔案丟進該頁自己的檔案輸入框——跟你用的是同一條程式路徑;
  4. 等下載連結出現,抓取結果的 blob,讀出精確的位元組長度。

站上所有數字都是這樣在 2026-07-28Chromium 151.0.7922.34 跑出來的,除表格另有標明,一律使用各頁的預設設定。

有兩個前提我們寧願講明白,不想埋起來。第一,圖片編碼器住在瀏覽器裡,不在我們的伺服器上,所以換一個瀏覽器、或換一版更新的 Chromium,大小可能略有不同——這些數字是「可重現」,不是「普世通用」。第二,檔案大小不等於畫質:更小的檔案很可能更難看,而這些表格沒有任何一項在量「看起來如何」。

哪些沒測,以及為什麼

瀏覽器 canvas 只能編碼三種格式 —— 向 Chromium 151 要 image/avifimage/gifimage/bmpimage/tiff,回來的都是 PNG。所以 PNG、JPEG、WebP 以外的格式,編碼器都得自己寫。我們已經寫了三個:未壓縮的 24 位元 BMP、未壓縮的 baseline TIFF(掃描器產出的常常就是這樣),以及帶 LZW 壓縮的 GIF89a

GIF 只有部分覆蓋,而原因出在 GIF 自己:它最多只有 256 色。我們數過自己測試圖的色數 —— 介面截圖 13 色、透明標誌 12 色,兩張都能精確編碼;但平面插畫有 490 色、照片有 200,374 色,因為圓形的反鋸齒邊緣與顆粒雜訊產生了數百種中間色調。把它們量化下去會變成另一張圖,再拿去和原本的 PNG 比大小就沒有意義了。所以 GIF 那幾列用的是真的塞得進去的兩張 —— 而那兩張正好就是 GIF 在現實中被用來裝的東西:平面介面截圖與透明貼圖。

AVIF 走的是另一條路。AVIF 的酬載是一格 AV1 影片幀,而 AV1 編碼器不是幾百行手寫能解決的東西。所以那幾個測試檔是用 ffmpeg 加 libaom-av1 產生的:-crf 23 -cpu-used 4 -still-picture 1 -pix_fmt yuv420p。crf 刻意選在接近 JPEG 與 WebP 來源檔所用的品質 92 —— 拿一個低品質的 AVIF 去對一個高品質的 JPG,那不是公平的比較。動用外部工具並沒有削弱這件事的可信度,因為這裡的原則從來不是「檔案必須在瀏覽器裡誕生」,而是「檔案要公開,讓任何人都能重跑出同一個數字」。三個 AVIF 檔案與那一行指令都公開了,兩邊都查得到。

HEIC:我們說過這做不到,而那句話是錯的。這一頁原本寫著 HEIC 量不到 —— 說這個 ffmpeg 版本有 libx265 但沒有 HEIF muxer,而且瀏覽器與 npm 上也沒有能寫 .heic 的。前半句是真的;後半句是我們把一個工具的限制講成了通則。libheif 自己就帶 x265 編碼器,透過 pillow-heif 走進去,四個測試檔第一次就產出來了,品質 92 對齊語料庫既有的 JPEG 與 WebP 來源檔。四個檔都跟其他測試檔一起公開。要講精確:這些是libheif 編碼的 HEIC,不是 iPhone 拍出來的 —— Apple 的檔案常是 10-bit 4:2:0、帶自己的方向與 EXIF,所以你量到的數字不會和我們完全一樣。真正還在的限制只剩一個:語料庫裡沒有透明的 AVIF,因為 ffmpeg 的 AVIF muxer 不寫 alpha 輔助項,產出的檔案是不透明的。用一個「其實不透明」的檔案去測「透明保不保得住」,那是演戲。HEIC 這一組的透明有保住 —— 產生語料庫的腳本會把每個檔案當場解回來驗證,沒保住的就直接跳過,不會公開。

PDF 那幾頁一開始缺席是另一個理由 —— 我們以為合併或旋轉 PDF 不是「檔案大小」的問題。這個判斷錯了,而數字正是有意思的地方:從同一份測試文件抽出第 3 頁得到 331.2 KB,抽第 4 頁只得到 1.4 KB。所以九個 PDF 轉換器現在也都量了,用的是一份「頁與頁重量差極大」的 5 頁文件。

這樣全部 38 個轉換器都有實測數字了。會從 36 變成 38,不是因為我們把標準放低,而是因為上面那一段原本寫錯了 —— 而要改掉那種句子,得真的去把編碼器找出來,不是把數字改掉。

全部實測結果

各轉換器頁上的數據,集中在這裡一次看完。百分比都是相對於來源檔計算的。如果你想直接看結論而不是自己讀表,我們把它寫成了一篇決策指南:該轉成哪一種格式,按「你的圖裡面是什麼」來分。

PNG 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 1.88 MB 288.4 KB −85%
介面截圖 18.0 KB 43.5 KB +142%
平面插畫 34.7 KB 24.1 KB −30%
透明標誌 28.8 KB 16.3 KB −43%

PNG 轉 WebP

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 1.88 MB 303.1 KB −84%
介面截圖 18.0 KB 7.3 KB −59%
平面插畫 34.7 KB 10.2 KB −71%
透明標誌 28.8 KB 7.5 KB −74%

JPG 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 330.2 KB 2.07 MB +542%
介面截圖 45.3 KB 72.8 KB +61%
平面插畫 25.6 KB 143.8 KB +461%

JPG 轉 WebP

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 330.2 KB 301.9 KB −9%
介面截圖 45.3 KB 7.3 KB −84%
平面插畫 25.6 KB 10.6 KB −59%

WebP 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 351.5 KB 2.15 MB +527%
介面截圖 7.3 KB 82.3 KB +1034%
平面插畫 10.8 KB 94.0 KB +769%
透明標誌 7.6 KB 36.9 KB +388%

WebP 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 351.5 KB 281.2 KB −20%
介面截圖 7.3 KB 45.5 KB +527%
平面插畫 10.8 KB 23.7 KB +119%
透明標誌 7.6 KB 16.5 KB +118%

BMP 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 2.75 MB 2.25 MB −18%
介面截圖 2.75 MB 22.9 KB −99%
平面插畫 2.75 MB 40.6 KB −99%

BMP 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 2.75 MB 288.4 KB −90%
介面截圖 2.75 MB 43.5 KB −98%
平面插畫 2.75 MB 24.1 KB −99%

BMP 轉 WebP

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 2.75 MB 303.1 KB −89%
介面截圖 2.75 MB 7.3 KB −100%
平面插畫 2.75 MB 10.2 KB −100%

JFIF 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 330.2 KB 315.6 KB −4%
介面截圖 45.3 KB 44.8 KB −1%
平面插畫 25.6 KB 24.2 KB −6%

JFIF 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 330.2 KB 2.07 MB +542%
介面截圖 45.3 KB 72.8 KB +61%
平面插畫 25.6 KB 143.8 KB +461%

SVG 轉 PNG

設定: 輸出寬度 512 px(預設值)

測試項目 轉換前 轉換後 變化
向量圖 574 B 17.9 KB +3087%

SVG 轉 JPG

設定: 輸出寬度 512 px(預設值)

測試項目 轉換前 轉換後 變化
向量圖 574 B 13.2 KB +2262%

SVG 轉 WebP

設定: 輸出寬度 512 px(預設值)

測試項目 轉換前 轉換後 變化
向量圖 574 B 6.6 KB +1082%

PNG 轉 SVG

設定: 細節「平衡」(預設值)

測試項目 轉換前 轉換後 變化
平面插畫 34.7 KB 117.0 KB +238%
介面截圖 18.0 KB 27.3 KB +52%
透明標誌 28.8 KB 1.7 KB −94%
類照片 1.88 MB 7.74 MB +312%

JPG 轉 SVG

設定: 細節「平衡」(預設值)

測試項目 轉換前 轉換後 變化
平面插畫 25.6 KB 198.0 KB +672%
介面截圖 45.3 KB 302.1 KB +568%
類照片 330.2 KB 7.49 MB +2224%

圖片壓縮

設定: WebP、品質 80(預設值)

測試項目 轉換前 轉換後 變化
類照片 330.2 KB 178.7 KB −46%
介面截圖 45.3 KB 6.7 KB −85%
平面插畫 25.6 KB 7.7 KB −70%

圖片縮放

設定: 縮到寬 800 px,鎖定比例

測試項目 轉換前 轉換後 變化
類照片 1.88 MB 967.2 KB −50%
介面截圖 18.0 KB 15.3 KB −15%
平面插畫 34.7 KB 28.8 KB −17%
透明標誌 28.8 KB 17.2 KB −40%

PNG 轉 ICO(favicon 產生器)

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
透明標誌 28.8 KB 951 B −97%
平面插畫 34.7 KB 1.3 KB −96%

合併 PDF

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
混合檔 + 純文字檔 336.9 KB 336.0 KB −0%

分割 PDF

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
抽出第 3 頁(照片) 334.1 KB 331.2 KB −1%
抽出第 4 頁(文字) 334.1 KB 1.4 KB −100%

旋轉 PDF

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
每頁旋轉 90° 334.1 KB 334.1 KB +0%

壓縮 PDF

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
壓縮,預設品質 334.1 KB 167.6 KB −50%

整理 PDF 頁面(刪除 / 重排)

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
刪掉第 3 頁(照片) 334.1 KB 3.4 KB −99%
刪掉第 4 頁(文字) 334.1 KB 333.3 KB −0%

PDF 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
第 3 頁渲染(照片) 334.1 KB 276.2 KB −17%
第 4 頁渲染(文字) 334.1 KB 70.7 KB −79%

PDF 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
第 3 頁渲染(照片) 334.1 KB 1.97 MB +504%
第 4 頁渲染(文字) 334.1 KB 114.6 KB −66%

JPG 轉 PDF

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 330.2 KB 331.1 KB +0%

PNG 轉 PDF

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 1.88 MB 2.08 MB +11%

GIF 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
介面截圖 10.2 KB 22.9 KB +125%
透明標誌 4.3 KB 26.0 KB +507%

GIF 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
介面截圖 10.2 KB 43.5 KB +327%
透明標誌 4.3 KB 17.3 KB +304%

GIF 轉 WebP

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
介面截圖 10.2 KB 7.3 KB −29%
透明標誌 4.3 KB 5.4 KB +27%

TIFF 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 2.75 MB 288.4 KB −90%
介面截圖 2.75 MB 43.5 KB −98%
平面插畫 2.75 MB 24.1 KB −99%

TIFF 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 2.75 MB 2.25 MB −18%
介面截圖 2.75 MB 22.9 KB −99%
平面插畫 2.75 MB 40.6 KB −99%

AVIF 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 122.3 KB 1.95 MB +1532%
介面截圖 1.4 KB 36.5 KB +2442%
平面插畫 3.2 KB 90.6 KB +2704%

AVIF 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 122.3 KB 231.6 KB +89%
介面截圖 1.4 KB 43.7 KB +2942%
平面插畫 3.2 KB 23.5 KB +626%

AVIF 轉 WebP

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 122.3 KB 234.4 KB +92%
介面截圖 1.4 KB 6.9 KB +378%
平面插畫 3.2 KB 9.9 KB +208%

HEIC 轉 JPG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 886.6 KB 288.4 KB −67%
介面截圖 21.9 KB 43.4 KB +98%
平面插畫 26.0 KB 24.0 KB −8%
透明標誌 25.1 KB 15.2 KB −39%

HEIC 轉 PNG

設定: 頁面預設值

測試項目 轉換前 轉換後 變化
類照片 886.6 KB 1.82 MB +110%
介面截圖 21.9 KB 28.8 KB +31%
平面插畫 26.0 KB 48.3 KB +86%
透明標誌 25.1 KB 30.8 KB +23%

自己重跑一次

這件事完全不需要我們配合。從上面下載一張測試圖,打開對應的轉換器頁面,把檔案丟進去,再拿工具顯示的大小跟表裡那一列比對。工具全部在你的瀏覽器裡跑,而來源檔就是我們用的那幾個。

整張表告訴我們的六件事

  1. 沒有「比較小的格式」,只有「對這張圖比較小的格式」。整份數據裡落差最大的,就是同一個轉換器、同樣的預設設定:照片 −85%,截圖 +142%。
  2. WebP 幾乎到哪都贏 —— 但「幾乎」這兩個字是誠實的。來源是 PNG、JPG、BMP、TIFF 時,每一個 WebP 輸出都比輸入小。來源是 AVIF 時一次都沒贏過,也不可能贏。後來加上 GIF 就找到了例外:4.3 KB 的透明 GIF 出來變成 5.4 KB,大了 27%。面對一張 4 KB 的調色盤圖,現代編碼能搶回來的餘地已經很少。
  3. 轉成無損格式救不回畫質,卻一定要付出體積。JPG → PNG 讓照片脹了 542%,而畫面的受損程度跟原來那張 JPG 一模一樣。
  4. BMP 的檔案大小完全與內容無關。三個 BMP 來源檔都是不折不扣的 2.75 MB,不管裡面裝的是雜訊很多的照片還是六個純色塊。這就是「沒有壓縮」的實際意思。
  5. 向量轉點陣是一道單向門。574 位元組的 SVG 一經點陣化就變成 6.6 到 17.9 KB,而且不再能無限放大;反方向也只有平面圖形行得通——把照片拿去描邊,結果是 7.74 MB 的一堆路徑。
  6. 表裡最懸殊的幾列都是 AVIF,而那其實是在誇獎 AVIF。1200 × 800 的介面截圖用 AVIF 只要 1,472 位元組;轉出去的代價是 WebP +378%、PNG +2442%、JPG +2942%。離開 AVIF 沒有任何「省空間」的理由,只有相容性的理由——而那正是那三頁存在的目的。