WebP 是什麼？怎麼轉成 JPG：官方比 PNG 小 26%，我把網站圖片換過去省 97% 流量

在網路上長按存一張圖，副檔名變成 .webp，想傳給別人或上傳表單卻卡住。這篇把 WebP 講清楚：它是什麼、你的手機電腦到底看不看得到、要轉成 JPG 有哪幾個做法，最後是我 10 月 5 號把自己一個網站的首頁圖全部換成 WebP 的實測數字——圖片流量從 4.03 MB 掉到 114 KB。

WebP 是什麼？為什麼現在存圖都變這個

WebP 是 Google 推的網頁圖片格式，同時支援有損和無損兩種壓縮，也支援透明背景。你會一直遇到它，是因為網站為了讓頁面快點載完，把原本的 JPG、PNG 換成了 WebP，你存下來的自然就是換過的版本。

Google 的官方文件把目的寫得很直接：「使用 WebP 時，網站管理員和網頁程式開發人員可以製作更精美的小型圖片，藉此加快網頁載入速度。」換句話說，WebP 不是為了「存檔」設計的格式，是為了「傳輸」設計的。這也解釋了為什麼它在瀏覽器裡到處都是，在你的相簿和舊軟體裡卻很少見。

（本站自製資訊圖）

WebP 檔案打不開嗎？多數裝置其實早就看得到

先別急著找轉檔工具。如果你只是想「看」這張圖，現在的手機和電腦幾乎都開得起來。Google 官方的支援清單寫得很清楚：Safari 14 以上（也就是 iOS 14、macOS Big Sur 之後）、Chrome 電腦版 17 以上、Microsoft Edge 18 以上、Firefox 65 以上，都原生支援 WebP。

這幾個版本的時間點都已經是好幾年前。所以真正會讓你非轉不可的情況，通常不是「看不到」，而是下面這兩種：

• 要上傳到一個只收 JPG／PNG 的表單或系統（公司內部系統、政府網站、某些電商後台最常見）
• 要丟進某個比較舊的影像軟體或列印流程，那套工具不認 WebP

圖／Google WebP 官方常見問題（來源）

WebP 怎麼轉成 JPG？3 個方法

Mac 用內建的「預覽程式」匯出就好，不用裝任何軟體；要一次轉一整批就用指令；跨平台或 Windows 這邊，用 Google 官方提供的 dwebp 工具最保險。三個方法照你的情況挑一個：

1. Mac 單張：預覽程式　雙擊圖片用「預覽程式」打開 → 檔案 → 匯出 → 格式選「JPEG」→ 儲存。品質滑桿拉到八成左右就夠用。
2. Mac 批次：終端機一行指令　macOS 內建 sips，打 sips -s format jpeg 圖片.webp --out 圖片.jpg 就轉好了。整個資料夾就套一個迴圈跑。
3. 跨平台／要穩：Google 官方的 dwebp　官方 WebP 頁面有提供 Linux、Windows、macOS 的預先編譯工具，cwebp 負責轉成 WebP、dwebp 負責把 WebP 轉回去。官方工具的好處是行為跟規格一致，不會因為某個線上服務偷偷重壓一次而掉畫質。

（本站自製資訊圖）

WebP 真的比較小嗎？官方公布的 4 個數字

比較小，而且 Google 在官方文件裡給了具體幅度。這四個數字是 WebP 整件事的基礎，網站願意全面換過去就是為了它們：

比較項目	官方數字	條件
無損 WebP vs PNG	小 26%	畫質完全不掉
有損 WebP vs JPEG	小 25-34%	在相等的 SSIM 品質索引下
透明圖 vs PNG	可小 3 倍	接受有損 RGB 壓縮時；無損版支援透明只多 22% 位元組
動畫 WebP vs GIF／APNG	較小	動畫版同時支援有損、無損與透明度

圖／Google WebP 官方文件（來源）

（本站自製資訊圖）

我把自己網站的圖換成 WebP：流量少 97%

結果先放：首頁圖片從 4.03 MB 降到 114 KB，少了 97.24%。測的條件是 375×812、像素密度 1 的手機畫面，只計圖片檔案本身的大小，不含 HTML、CSS、JavaScript 和字型，也不是 LCP 那種計時數據。

事情的起點很單純。10 月 5 號我用 AI 協作做了一個小遊戲網站 gods.dada3c.tw，20 尊神明、200 關的邏輯題。做法跟我之前寫過的〈Claude Code 怎麼用？不會寫程式的人靠 4 步驟 BITE，一個下午蓋出自己的工具〉是同一套：先把要什麼講清楚，再讓 AI 去實作。整站從零到上線花了一個下午。

然後我自己拿手機開，第一眼就發現首頁的圖要等。進去看才知道三個主角是高 1200 的透明 PNG，一張就 1.2 MB，背景另外還有一張。這是 AI 寫程式最容易漏掉的一塊：功能全對、畫面也漂亮，但「交付給瀏覽器的那一份要多重」沒人管。

處理方式是兩件事一起做，不是只換格式：

1. 換格式：主角圖和背景改存成 WebP（我用的參數是品質 86、method 6、保留透明）。
2. 出多尺寸：同一張主角圖做成高 240、480、800 三個版本，HTML 用 <picture> 依照螢幕尺寸和像素密度自己挑一個載，背景另外裁一張窄的給手機用，原始 PNG 和 JPG 全部留著當 fallback。

幾個實際數字：主角圖原本 1,267,348 位元組（約 1.21 MB），手機實際只需要高 240 那版，19,746 位元組就夠；1920×1080 的背景同尺寸從 JPG 的 265 KB 換成 WebP 的 165 KB，手機版再裁窄到 59 KB。整組算下來就是那個 97.24%。

關鍵在第二件事。只換格式大概只會省三到四成，真正把數字拉開的是「不要把高 1200 的原圖丟給一支高 240 的畫面」。這點跟我寫〈Vibe Coding 是什麼？Google 白皮書：寫程式正在從「怎麼做」變成「講你要什麼」〉時的感想一樣：你要能講出「我要什麼」，AI 才知道要做到哪裡——它不會自己想到要幫你顧行動網路的使用者。

（本站自製資訊圖）

什麼時候先別轉？3 個我實際踩到的限制

WebP 不是萬用答案，下面三件事是我這次自己撞到的，先知道可以少走冤枉路。

1. 轉回 JPG 可能反而變大。我拿一張 19,746 位元組的 WebP 轉成 JPG，出來是 20,863 位元組，大了快 1 KB。因為 WebP 本來就壓得比 JPEG 好，轉回去等於退一步。所以如果你的目的只是「存起來看」，根本不用轉。
2. macOS 的 sips 只能讀、不能寫 WebP。我在自己機器（macOS 26.6.2）上試過，sips 把 WebP 轉成 JPG 沒問題，反過來要它產生 WebP 就直接噴 Can't write format: org.webmproject.webp。要產生 WebP 得換 Google 官方的 cwebp，或走程式庫處理。
3. 有損壓縮回不去，原圖一定要另外留。我的做法是原始檔案完全不動，另外產一份「交付版」給網頁用。這樣以後要改尺寸、改品質都還有母片，不會每改一次就多掉一層畫質。

（本站自製資訊圖）

一般人怎麼開始？3 步驟

1. 先分清楚你是哪一種需求。只是存起來自己看 → 不用轉，直接開就好。要上傳到只收 JPG 的地方 → 轉一張就好，不要整批動。
2. 要轉就用系統內建的。Mac 走預覽程式的「匯出」，不要為了一張圖裝一套軟體，也少用來路不明的線上轉檔站（圖會被上傳到別人的伺服器）。
3. 自己有網站或部落格的話，順序是先換格式、再出多尺寸。只做第一步大概省三到四成，兩步一起做才會看到數量級的差距。做完記得拿手機用行動網路實際開一次，自己當第一個使用者。

小結

WebP 從來不是來找你麻煩的，它只是把「網頁要快」這件事做到檔案層級，而你剛好在下載的時候接到了這個結果。知道它是什麼之後，多數情況你不用轉；真要轉，Mac 的預覽程式三秒就解決。

比較有價值的反而是另一面：如果你手上有網站、部落格、線上賣場，圖片幾乎都是最容易省、也最少人去省的一塊。我那個案例從 4.03 MB 降到 114 KB，沒有改任何一張圖的畫風、原件一張都沒刪，只是換了交付給瀏覽器的那一份。

你上次存到 WebP 是在什麼情況下？是看得到但傳不出去，還是要上傳卡在格式？留言跟我說你卡在哪一步，我拿那個情境實際測一次。

---

延伸閱讀

• 早上一睜眼就滑手機？Google 工程師 vibe code 一台電子紙看板，把全家行程畫成一張圖
• Claude Code 怎麼用？不會寫程式的人靠 4 步驟 BITE，一個下午蓋出自己的工具

本文的格式規格與壓縮數字整理自 Google WebP 官方文件：網頁的圖片格式、常見問題（繁體中文版）。文中的實測數字為本站 2026-10-05 在 gods.dada3c.tw 的實際量測，測量方式為首頁所選圖片加 favicon 的檔案位元組，不含 HTML、CSS、JavaScript、字型與 HTTP 標頭，亦非 LCP 計時；sips 行為於 macOS 26.6.2 驗證。