截圖選 PNG 還是 WebP？三張範例圖比較
用介面、程式碼和漸層三張範例圖，看看轉成 WebP 後有何變化。
對於你打算再次編輯的截圖，請保留 PNG 原始檔。對於要放在網站上的圖片，請嘗試 WebP，然後在分享前檢查最小的文字。
我們製作了三張範例圖片，並透過 CozyToolkit 的圖片轉換器匯出。你可以在下方檢查並下載每個結果。
三個檔案，相同尺寸
我們繪製了一個帶有小標籤的介面、一個帶有彩色文字的程式碼編輯器，以及一張漸層海報。每個都是 1200 × 750 像素。這些是合成範例，不是客戶檔案的截圖。
PNG 匯出使用瀏覽器的 PNG 編碼器。WebP 匯出使用品質 85，沒有調整大小或裁切。表格顯示了已儲存檔案的大小。
| 範例 | PNG | WebP 85 | 縮小 |
|---|---|---|---|
| 介面 | 92,339 | 24,320 | 74% |
| 程式碼與小文字 | 82,732 | 23,088 | 72% |
| 漸層海報 | 976,385 | 16,746 | 98% |
拖動平移·捏合或Ctrl/⌘+滾動縮放雙指縮放 · 拖動平移
使用+和−縮放，箭頭鍵平移，0適應影像。預覽縮放不會改變匯出結果。
漸層圖片縮小的幅度最大。其 PNG 包含大量平滑變化的像素值；有損 WebP 編碼器會用近似的顏色表示這些像素，讓檔案變小。兩個文字密集的範例也變小了，但僅憑檔案大小並不能告訴我們文字是否仍然清楚，能否滿足你的用途。
這不是同等品質的比較。 這裡的 PNG 是無損的。此設定下的 WebP 是有損的，意味著它可能改變像素。三個範例無法建立所有截圖的平均壓縮效果，而且來自其他編碼器的優化 PNG 可能比我們的更小。
下載前要注意什麼
在上方兩種格式之間切換並放大。特別檢查：
- 程式碼範例中的彩色標點符號。即使大文字看起來不錯，細小的彩色邊緣也可能變模糊。
- 介面中的小「Ready to share」標籤。
- 海報中的平滑過渡。看看漸層是否變成了一條條明顯的色帶。
也要以預期的顯示尺寸來判斷圖片。在 400% 縮放下可見的瑕疵在小預覽中可能無關緊要；但幫助文章中的模糊標籤就是問題。
依用途選擇格式
要留作原始底稿、逐像素比較，或完整保留文字細節，就選 PNG。 如果接收你圖片的應用程式不接受 WebP，它也是一個合理的備選。
當儲存檔案看起來足夠好時，為網頁和預覽嘗試 WebP。 它支援透明度，所以透明背景本身不是避免使用它的理由。WebP 支援無損和有損編碼，但此測試中使用的瀏覽器品質滑桿不是專門的無損開關。將其設定為 100 並不能保證你的匯出是無損的。請參閱 Google 的 WebP 格式文件 以了解區別。
用你的截圖試試
- 開啟 圖片轉換器 並新增你的 PNG。
- 選擇 WebP 作為輸出格式。從品質 85 開始，保持尺寸不變。
- 轉換，放大結果並與你的原始檔比較。
- 如果小細節受影響，提高品質。如果結果仍然看起來不對，保留 PNG。
如果圖片只會以目前寬度的一半顯示，調整大小 可能比更改格式節省更多。縮小前要想清楚：較小的圖片無法保留相同的細節。
這個比較是如何進行的
於 2026 年 9 月 28 日在 macOS 上的 Chrome 153.0.8010.53 中測試，使用與工具相同的轉換功能。測試圖是在瀏覽器畫布上使用系統字體繪製的。PNG 轉換沒有使用調色板縮減；WebP 使用瀏覽器編碼器，品質參數為 0.85。
下載測量結果，包括精確的位元組數和檔案雜湊。瀏覽器編碼器和字體可能不同，所以在另一個系統上重新執行範例可能產生不同的大小。上述百分比描述的是這些特定下載，而不是對你的結果的承諾。