PNG vs WebP：新格式值得切換嗎？深度比較指南

WebP 是 Google 在 2010 年推出的現代圖片格式，設計目標就是在保持相同視覺品質的前提下，比 JPG 和 PNG 更小。如今各大瀏覽器的支援度已相當成熟，越來越多網站開始採用 WebP。但 PNG 長達三十年的地位並非沒有道理——它有自己不可替代的優勢。本文深入比較兩者，幫助你判斷是否值得切換。

WebP 的壓縮優勢

Google 的官方研究數據顯示，WebP 的無損版本比同等 PNG 平均小 26%；有損版本則比 JPG 平均小 25–34%。這不是邊際差距，而是相當可觀的節省。

WebP 的壓縮技術基於 VP8 視訊編碼，採用更先進的預測編碼和熵編碼演算法，能更有效率地描述圖像資料。無論是照片還是圖形，它都能做到比 PNG 更小的輸出。

對於網站而言，圖片通常佔頁面總資料量的 50–70%。全面切換到 WebP 可以讓 LCP（最大內容繪製）時間顯著下降，直接提升 Google Core Web Vitals 分數，進而改善 SEO 排名。

透明度支援

WebP 同樣支援 Alpha 通道透明度，功能與 PNG 相當。你可以使用帶有透明背景的 WebP 圖片，並且在視覺效果上與 PNG 幾乎沒有差異——但檔案更小。

這一點很重要，因為許多人誤以為 WebP 只有 JPG 那樣的有損版本。事實上，WebP 有兩種模式：

• 無損 WebP：用於取代 PNG，支援透明度，無品質損失
• 有損 WebP：用於取代 JPG，不支援透明度，但壓縮率極高

瀏覽器相容性現況

截至 2024 年，WebP 的全球瀏覽器支援率已超過 97%，涵蓋：

• Chrome（2011 年起支援）
• Firefox（2019 年起支援）
• Safari（2020 年 iOS 14 / macOS Big Sur 起支援）
• Edge（2018 年起支援）

唯一需要注意的例外是 Internet Explorer——IE 完全不支援 WebP。但 Microsoft 已於 2022 年 6 月正式終止 IE 支援，如果你的目標用戶不包含 IE 使用者（通常是企業內網系統），IE 相容性已不再是實際障礙。

何時堅持使用 PNG

儘管 WebP 在壓縮方面佔優，PNG 在某些場景下仍是更好的選擇：

• 設計源檔與素材庫：設計工具（如 Photoshop、Figma）對 WebP 的原生支援仍不完整。儲存可供日後編輯的素材時，PNG 仍是業界標準。
• 印刷與出版：印刷流程通常需要 PNG、TIFF 等無損格式，WebP 的接受度較低。
• 電子郵件圖片：許多電子郵件客戶端（如 Outlook）不支援 WebP。電子報或 HTML 郵件中的圖片最好仍使用 PNG 或 JPG。
• 舊版系統整合：若你的系統或合作平台對圖片格式有特定要求，需確認對方是否接受 WebP。
• 截圖與螢幕錄製：作業系統的截圖工具預設輸出 PNG，轉換不一定必要。

實際效能測試比較

以幾種常見情境為例的概略比較：

• 1200×800 產品照片：PNG 約 800 KB → 無損 WebP 約 580 KB（節省 27%）
• 透明背景 Logo（400×400）：PNG 約 45 KB → 無損 WebP 約 32 KB（節省 29%）
• 全彩插圖：PNG 約 1.2 MB → 無損 WebP 約 880 KB（節省 27%）

對於大型網站來說，這種節省積累起來非常可觀——假設每月有 10 萬次圖片請求，切換 WebP 可節省數十 GB 的頻寬。

如何在網站上導入 WebP

最安全的做法是使用 HTML 的 <picture> 元素，提供 WebP 和 PNG 的回退方案：

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="描述文字">
</picture>

支援 WebP 的瀏覽器會載入 WebP 版本；不支援的瀏覽器則自動回退到 PNG。這樣既能享受現代瀏覽器的效能優勢，又不必擔心相容性問題。

WordPress 5.8 以上版本已原生支援 WebP 上傳，許多圖片優化外掛（如 ShortPixel、Smush、WebP Express）也能自動將現有圖片轉換並提供 WebP 版本。

轉換工具與方法

• 線上轉換工具：最簡便的方式，無需安裝軟體，直接上傳 PNG 即可下載 WebP。
• ImageMagick（命令列）：適合批次處理大量圖片。
• Squoosh（Google）：免費線上工具，可即時預覽不同格式和壓縮設定的效果。
• Photoshop / Figma：較新版本已支援直接匯出 WebP。

總結：值得切換嗎？

對於以下情況，答案是肯定的：

• 你在優化網站效能和 Core Web Vitals 分數
• 你的目標用戶使用現代瀏覽器
• 你有大量圖片需要提供給終端用戶

但 PNG 仍有其不可替代的地位，特別是在設計工作流程和電子郵件應用中。最實際的策略是：網頁展示用 WebP，設計素材和電子郵件保留 PNG。

在瀏覽器裡直接完成，檔案不會離開你的電腦：圖片格式轉換