# PNG to WebP

> 在瀏覽器內把 PNG 轉成 WebP：透明度原樣保留，動畫 PNG 依然會動，消失的是 EXIF 與色彩描述檔。實測從 1,689,485 位元組降到 319,834 位元組，約小 81%。

- URL: https://bytescope.dev/zh-Hant/image-convert/png-to-webp/
- Locale: zh-Hant · Also: [en](https://bytescope.dev/en/image-convert/png-to-webp.md) · [ja](https://bytescope.dev/ja/image-convert/png-to-webp.md)
- Runs: 檔案不會離開你的瀏覽器 — 全部在本機處理。
- Requires: Any modern browser (Chrome, Edge, Firefox, Safari), desktop and mobile.
- Updated: 2026-09-08

## What it does

### PNG 轉成 WebP 會失去什麼

大家最擔心會不見的兩件事，其實都留得住。WebP 帶完整的 8-bit alpha 色版，所以透明像素不必像走 JPG 那條路一樣被背景色蓋掉。動畫 PNG 也一樣：轉檔前會先用瀏覽器的 ImageDecoder 打開檔案，只要影格多於一格而目標又是 WebP，工具就會逐格重新編碼，組出一個保留原本影格間隔與循環次數的動態 WebP。只有在組裝失敗時才退回單張靜態畫面，而且會把這件事寫成警告顯示出來，不會默默把動畫吞掉。

真正消失的是像素以外的東西。來源會先被解碼、畫到 canvas 上，再重新編碼一次，所以附屬區塊都不會跟著走：嵌入的 ICC 色彩描述檔、描述來源色彩空間的 `gAMA` 與 `cHRM`、文字區塊，以及相機或編輯軟體寫上去的 EXIF，全都不在輸出裡。標成 Display P3 的廣色域圖片因此會變成沒有標記的像素值，看圖軟體只能當成 sRGB 解讀。位元深度是另一個代價：PNG 每個通道可以存到 16-bit，但工具畫進去的 canvas 是 8-bit RGBA，48-bit 的原版在編碼器看到它之前就被截斷，這份精度沒辦法從結果裡挖回來。

最後一項是可以自己決定的，不是格式逼你的。預設輸出是有損的，所以細緻紋理、有抖動處理的漸層，以及螢幕截圖和 UI 輸出常見的一像素邊線都會被近似掉。把上面設定裡的無損開關打開就會改用 WASM 編碼器，逐個像素完整保留，遇到平面圖形通常還是比原檔小。這是整份清單裡唯一一個你能自己關掉的損失。

### 實測時檔案大小怎麼變

2026-09-12 由 `apps/web/scripts/measurePairs.ts` 測得：以釘住 commit 的 libheif 範例照片做成、再用「最佳化 (oxipng)」打開之後寫出來的 1280 × 854 PNG 是 1,689,485 位元組。這個工具預設把那個選項關著，所以同一張圖若沒開最佳化，當來源的位元組會再大一點；交給 @jsquash/webp 以品質 85 編碼後變成 319,834 位元組，這張照片樣本約縮小 81%。請把它當成一筆紀錄，不是通則。有損 WebP 贏最多的情境就是照片；平面 logo、大片單色的螢幕截圖，或本來就已經減色過的圖，PNG 自己也壓得很好，差距會迅速縮小，改用無損模式時甚至可能反過來。

### 什麼時候不該把 PNG 轉成 WebP

如果這份 PNG 是你會反覆編輯、反覆輸出的母檔，就留著它：品質 85 的有損編碼每跑一次就多疊一層近似。需要逐像素比對的場合，例如自動化截圖測試，除非改用無損，否則也不該轉。目的地不在現代網頁的時候同樣要停手：郵件軟體對 WebP 的支援到現在還參差不齊，部分印刷與製版流程直接拒收，網站圖示與 App 圖示的產生工具通常也只吃 PNG 或 ICO。拿來當高度圖、深度圖或量測用途的 16-bit PNG 根本不該走這條路，問題出在 8-bit 的 canvas，不在編碼器。至於放進網頁的照片和截圖這種一般情況，這是最划算的減重手段之一。

轉換完全在你的瀏覽器內進行 — 不上傳、不排隊、無浮水印。想放幾個檔案都行，可逐一下載，也能打包成 zip。

## Limits

大家最擔心會不見的兩件事，其實都留得住。WebP 帶完整的 8-bit alpha 色版，所以透明像素不必像走 JPG 那條路一樣被背景色蓋掉。動畫 PNG 也一樣：轉檔前會先用瀏覽器的 ImageDecoder 打開檔案，只要影格多於一格而目標又是 WebP，工具就會逐格重新編碼，組出一個保留原本影格間隔與循環次數的動態 WebP。只有在組裝失敗時才退回單張靜態畫面，而且會把這件事寫成警告顯示出來，不會默默把動畫吞掉。

真正消失的是像素以外的東西。來源會先被解碼、畫到 canvas 上，再重新編碼一次，所以附屬區塊都不會跟著走：嵌入的 ICC 色彩描述檔、描述來源色彩空間的 `gAMA` 與 `cHRM`、文字區塊，以及相機或編輯軟體寫上去的 EXIF，全都不在輸出裡。標成 Display P3 的廣色域圖片因此會變成沒有標記的像素值，看圖軟體只能當成 sRGB 解讀。位元深度是另一個代價：PNG 每個通道可以存到 16-bit，但工具畫進去的 canvas 是 8-bit RGBA，48-bit 的原版在編碼器看到它之前就被截斷，這份精度沒辦法從結果裡挖回來。

最後一項是可以自己決定的，不是格式逼你的。預設輸出是有損的，所以細緻紋理、有抖動處理的漸層，以及螢幕截圖和 UI 輸出常見的一像素邊線都會被近似掉。把上面設定裡的無損開關打開就會改用 WASM 編碼器，逐個像素完整保留，遇到平面圖形通常還是比原檔小。這是整份清單裡唯一一個你能自己關掉的損失。

## FAQ

### PNG 轉成 WebP 之後透明度還在嗎？

在。WebP 存的是完整 8-bit alpha 色版，半透明像素、柔和陰影與去鋸齒的邊緣都原樣通過，過程中不會鋪任何背景色。原圖只要有透明區域，這就是選它而不是選 JPG 的主要理由。

### 動畫 PNG 會變成會動的 WebP 嗎？

會。工具偵測到多格影像時，不會只留第一格，而是組出保有原始間隔與循環次數的動態 WebP。萬一這段編碼失敗，才退回單張靜態畫面並顯示警告，所以你一定知道自己拿到的是哪一種。

### WebP 一定比原本的 PNG 小嗎？

不一定。實測的照片樣本約小 81%，但平面色塊圖、小圖示，或已經減色過的來源可能只差一點點，無損模式偶爾還會變大。別憑印象認定，轉完看一下大小數字再決定。

### 我的圖片會被上傳到任何地方嗎？

不會。轉換在你的瀏覽器內使用 canvas API 和 Web Worker 完成 — 檔案不會離開你的裝置。沒有上傳步驟、不用排隊，檔案大小也只受限於你電腦的記憶體。

### 轉換後的圖片會保留 EXIF 中繼資料嗎？

不會 — 而這正是特色之一。透過 canvas 重新編碼會移除所有中繼資料：GPS 位置、相機型號、時間戳記和色彩描述檔。輸出只包含像素，而這通常正是你公開分享圖片前想要的結果。

### 可以一次轉換很多張圖片嗎？

可以。拖放或貼上任意數量的檔案；每個檔案都會在背景轉換，各自有進度顯示和下載按鈕，也可以把全部內容打包成 .zip 一次下載。

### 轉檔會讓畫質變差嗎？

看你選的目標格式。不管來源和目標是哪兩種格式，轉換器一律先解碼成原始像素再重新編碼，中繼資料也是這樣被移除的。目標是無損格式（PNG，以及在 256 色限制內的 GIF）時，像素和解碼出來的完全一樣；目標是 JPEG、WebP 或 AVIF 時，則由品質滑桿控制取捨，而且來源本來就是有損檔的話，會再多疊一層損失。