WebP 是 Google 推出的現代圖片格式,已悄悄成為「網站要快」的首選。如果你曾猶豫要不要把圖片換成 .webp,這篇說明它的作用與適用時機。
這件事我們自己測過。 在我們測過的每一種來源格式裡——PNG、JPG、BMP——WebP 是唯一從沒輸過的目標格式。PNG 轉 WebP 讓四張測試圖全部變小,幅度 59% 到 84%,而且透明標誌的透明度完整保留(28.8 KB → 7.5 KB)。沒有其他輸出格式做到這件事。 看完整實測數據
WebP 為什麼存在
過去網頁長年被兩種格式瓜分:照片用 JPG,logo 與透明圖用 PNG。WebP 的設計目標就是同時取代這兩者。它支援:
- 像 JPG 的有損壓縮,但更有效率
- 像 PNG 的無損壓縮
- 透明(alpha 通道)
- 像 GIF 的動畫
實務上,在相同視覺畫質下,WebP 通常比對應的 JPG 小 25–35% —— 那是最常被引用的數字,而它比較的是兩個有損格式。下面我們自己量到的幅度大得多,是因為起點是 PNG,而 PNG 是無損的:要贏過一個「把每個像素原封不動存下來」的格式,比贏過 JPG 容易太多。兩個數字都對,只是在回答不同的問題。
省下多少不是傳聞,這裡給實測版本。用我們自己的 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%)而且透明保住。一個格式同時吃照片、平面圖和透明,這就是 WebP 存在的全部理由。
什麼時候該用 WebP
適合用 WebP 的情況:
- 你在經營網站、希望它載入更快——更小的圖片能改善 Core Web Vitals 與 SEO。
- 你同時需要透明與小檔案,這是 JPG 做不到的。
- 你的訪客用的是現代瀏覽器(Chrome、Edge、Firefox、Safari 的新版都支援 WebP)。
最有意思的一筆是我們沒去找、自己撞到的。同一張截圖從四種不同來源轉過來,每次都落在同一個地方:18.0 KB 的 PNG 給 7.3 KB、45.3 KB 的 JPG 給 7.3 KB、10.2 KB 的 GIF 給 7.3 KB、2.75 MB 的 BMP 也給 7.3 KB。輸出大小由像素決定,不由它抵達時待在哪個容器決定 —— 這也是為什麼「全部轉成 WebP」是一個站得住腳的批次策略,而大多數格式建議做不到這件事。
什麼時候還是用 JPG 或 PNG
WebP 並非萬用解:
- 要把檔案傳給別人,而對方可能用較舊的軟體開啟——JPG 與 PNG 幾乎到處都能開。
- 要上傳到不接受
.webp的平台(有些較舊的工具、印表機仍不支援)。 - 印刷流程通常預期 JPG、PNG 或 TIFF。
不確定相容性時,一般的 JPG 或 PNG 就是安全的退路。
兩個實測例外讓這件事保持誠實。一張已經存成 JPG 的照片只從 330.2 KB 掉到 301.9 KB(−9%)—— 兩邊都是有損,而那個 JPEG 本來就壓得不差,沒剩多少可以搶。另外我們 4.3 KB 的透明 GIF 反而變大到 5.4 KB(+27%):面對一張很小的調色盤圖,現代編碼沒有東西可以拿回來。如果檔案本來就小、本來就有損,WebP 不是免費的錢。
如何與 WebP 互轉
以下免費工具全程在你的瀏覽器本機執行,不上傳:
- PNG 轉 WebP——縮小 logo 與圖形,同時保留透明。
- JPG 轉 WebP——把照片縮小給網頁用。
- WebP 轉 PNG——取得相容性高的無損副本。
- WebP 轉 JPG——給只接受 JPG 的工具。
原則很簡單:在自己的網站上用 WebP 換速度,要把檔案交給別人時,就轉回 JPG 或 PNG。
WebP 和它想取代的格式怎麼比
| JPG | PNG | GIF | WebP | |
|---|---|---|---|---|
| 照片 | 好 | 浪費空間 | 差 | 好 |
| 透明 | 不支援 | 支援 | 只有 1-bit | 支援(完整 alpha) |
| 動畫 | 不支援 | 不支援 | 支援(256 色) | 支援(全彩) |
| 無損選項 | 沒有 | 有 | 有 | 有 |
| 一般大小 | 基準 | 大 | 大 | 小 25–35% |
跟動畫 GIF 相比,WebP 版通常只有它的幾分之一大,而且是數百萬色而非 256 色——這也是 GIF 正逐漸被淘汰的原因之一。
幾乎沒有比較文會提的是「離開的代價」。WebP 接近一道單向門:7.3 KB 的 WebP 截圖轉 PNG 變成 82.3 KB(+1034%)、轉 JPG 變成 45.5 KB(+527%);7.6 KB 的透明標誌轉 PNG 變成 36.9 KB(+388%)。只有照片走回頭路會變便宜,351.5 KB → 281.2 KB(−20%),而且是用畫質換的。任何你之後可能要編輯的東西,原始檔留著。
常見誤解
- 「WebP 只有有損。」 它同時有有損模式(源自 VP8 影片編碼)和支援透明的完整無損模式,所以能同時取代 PNG 和 JPG。
- 「WebP 每個軟體都能開。」 在瀏覽器裡是。但很多 email 用戶端、較舊的看圖軟體和部分工具至今仍卡在
.webp,這就是為什麼手邊留一份 JPG/PNG 很方便。 - 「檔案越大畫質越好。」 因為 WebP 效率高,較小的
.webp可能和較大的 JPG 看起來一模一樣。光看檔案大小,幾乎看不出畫質高低。
還有一個被數字終結的誤解:WebP 並不是全面比較小。來源是 AVIF 時它一律變大 —— 照片 122.3 KB → 234.4 KB(+92%);而 574 位元組的 SVG 點陣化成 WebP 是 6.6 KB(+1082%)。WebP 贏 JPG 與 PNG;它贏不了更新的編碼,也贏不了向量。
常見問答
WebP 會降低畫質嗎?
有損 WebP 會像 JPG 一樣捨棄部分資料,但同樣檔案大小下通常較不明顯。無損 WebP 則每個像素都原封保留。
為什麼我的 WebP 在 email 或舊程式裡打不開?
那些軟體比 WebP 支援還早出現。把它轉成 JPG 或 PNG,到哪都能開。
WebP 還是 AVIF,該選哪個?
AVIF 通常更小;WebP 產生更快、支援也略廣。完整比較見 AVIF vs WebP vs JPEG。