跳至內容
Vizua

WebP 是什麼?現代圖片格式的原理與重要性

更新:

WebP 是 Google 開發的圖片格式,支援有損和無損編碼、透明度及動畫。Google 公開的圖片集合依特定方法得到小於 JPEG 或 PNG 的檔案,但這是基準結果,不是每次轉換的保證。目前主要瀏覽器支援 WebP;其他軟體和舊用戶端仍需檢查。

WebP 的誕生背景

Google 於 2010 年 9 月 30 日發布 WebP,定位為網頁上 JPEG 的現代替代格式。這個格式源自影片編解碼器:Google 收購了開發 VP8 影片格式的 On2 Technologies,工程師發現 VP8 的壓縮技術同樣能有效縮小靜態圖片的檔案大小。

早期推廣並不順利。Chrome 幾乎立即加入支援,但其他瀏覽器廠商態度保守。Mozilla 公開質疑採用新格式的必要性,Apple 則完全置之不理。

轉捩點逐步到來:

  • 2012 年 — Chrome 的 WebP 實作增加無損和透明度功能
  • 2014 年 — WebP 持續在 Chromium 系和 Android 瀏覽器擴大支援
  • 2019 年 — Firefox 65 加入 WebP 支援
  • 2020 年 — Safari 隨 iOS 14 與 macOS Big Sur 世代支援 WebP
  • 目前 — 現行主要瀏覽器支援 WebP;舊版與非瀏覽器接收端仍需檢查

Safari 的支援補上了主要相容性缺口,但「瀏覽器支援」不是完整傳遞鏈。內嵌 WebView、郵件用戶端、爬蟲、編輯器、原生應用程式及長期使用的裝置可能遵循不同時程。

WebP 的壓縮原理

WebP 提供兩種壓縮模式,各自適合不同類型的圖片:

有損模式(適合照片)

有損 WebP 採用基於 VP8 的預測編碼:編碼器分析每個像素區塊,根據周圍區塊預測其外觀,再只儲存差異部分。這項技術對具有平滑漸層和自然紋理的照片特別有效。

Google 的比較研究在測試集合中,以相同 SSIM 得到比可比 JPEG 小 25–34% 的有損 WebP。這是參考背景,不是單一檔案預期;來源歷程、編碼器版本、設定、中繼資料及品質指標都會改變結果。

無損模式(適合圖形)

無損 WebP 使用空間預測、色彩轉換、調色盤編碼及熵編碼等技術。解碼可還原已編碼像素值,而中繼資料、描述檔及完全透明 RGB 值的處理仍是獨立的流程問題。

Google 公開的集合中,無損 WebP 平均比 PNG 小約 26%。個別檔案可能縮得較少或反而變大。無損模式還原像素值,但中繼資料和完全透明 RGB 仍可能受編碼器設定影響。

WebP vs. JPEG vs. PNG 比較

功能 WebP JPEG PNG
有損壓縮 是;Google 公開與 JPEG 的集合結果 支援 不支援
無損壓縮 是;Google 公開與 PNG 的集合結果 一般 JPEG 編碼不支援 支援
透明度(Alpha 通道) 支援 不支援 支援
動畫 支援 不支援 目前主要瀏覽器支援 APNG 擴充
瀏覽器支援 目前主要瀏覽器 非常廣泛 非常廣泛
最大解析度 16383 x 16383 視實作而定 視實作而定
常見用途 經測試的現代網頁傳遞候選 廣泛互通的照片傳遞 無損圖形、螢幕截圖及透明度流程

WebP 整合了 JPEG、PNG 和動畫格式分別提供的功能,但不保證在每個流程都更小或更相容。Google 記載一般 WebP 位元流的最大畫布為 16383 × 16383 像素,對非常大的圖片是實際限制。

現代網站為何採用 WebP

圖片是瓶頸時,傳輸與解碼會影響使用體驗和 Core Web Vitals。較小的 WebP 可能減少傳輸,但轉換本身不保證檔案更小、LCP 更快或排名改變。請測量頁面並保留合適備援。

HTTP Archive 可顯示其集合目前的格式使用情況。許多內容系統、圖片程式庫和 CDN 可接收或產生 WebP,但功能與方案會改變。請確認流程正確保留動畫、透明度、描述檔、中繼資料及快取變化。

網站擁有者和開發者可直接轉換。使用 Vizua 可在瀏覽器將 JPG 轉成 WebP將 PNG 轉成 WebP,不必安裝軟體,也不會把所選圖片內容送給 Vizua 轉換。

不適合使用 WebP 的情境

WebP 非常適合網頁傳輸,但並非所有場景的最佳選擇:

  • 封存 — 使用封存制度指定的格式、中繼資料政策、完整性檢查與備援,不要假設網頁傳遞格式就是封存格式。
  • 列印流程 — 交付前向印刷端確認接受的格式、描述檔、解析度及打樣要求。
  • 郵件附件 — JPEG 或 PNG 與舊用戶端及收件軟體可能更相容;請測試實際目的地。
  • 任一邊超過 16383 像素的圖片 — 一般 WebP 位元流上限是 16383 x 16383。改用合適的大畫布格式、圖塊或金字塔流程。

WebP 是網頁傳遞的有力候選,不是母檔的自動替代品。保留合適來源,並依網頁、列印、郵件或封存目的產生變體。

需要反向轉換?Vizua 同樣支援 WebP 轉 JPG 以及 WebP 壓縮

WebP 的未來:AVIF 的崛起

AVIF 是以 AV1 圖片編碼為基礎的較新格式,在部分基準和實際比較中可能勝過 WebP。差距取決於內容、編碼器、設定及品質測量。目前瀏覽器支援已擴大,但舊用戶端與非瀏覽器軟體仍不同。

AVIF 不會讓 WebP 過時。編碼成本、解碼表現、功能、工具及相容性都不同。<picture> 可提供 AVIF、WebP、JPEG,但若各候選未妥善產生和測試,正確順序也不保證最小檔案。

由於目前瀏覽器和工具支援廣泛,WebP 通常是實用的起始候選。當建置流程、品質審查、備援和受眾支援時再測試 AVIF。

常見問題

所有瀏覽器都能顯示 WebP 嗎?

目前版本的 Chrome、Firefox、Safari、Edge 和 Opera 都支援 WebP,但「所有瀏覽器」說得太廣:舊版瀏覽器、內嵌 WebView、郵件用戶端、原生應用程式及專業軟體可能不同。請查看受眾資料,並在不支援的用戶端很重要時提供 JPEG 或 PNG 備援。

WebP 比 JPEG 好嗎?

不是對每個檔案或流程都更好。Google 公開的 WebP 研究在測試集合中,以相同 SSIM 得到比可比 JPEG 更小的有損 WebP,但結果取決於來源、編碼器、設定及品質指標。WebP 增加透明度和動畫;JPEG 在舊軟體和非網頁環境仍有更廣相容性。

WebP 比 PNG 好嗎?

取決於圖片和軟體。Google 公開的集合中,無損 WebP 平均小於 PNG,但個別轉換可能更大。WebP 和 APNG 都能製作動畫。PNG 在工具廣泛相容和可預測的無損流程中仍有用途。

轉換為 WebP 會失去品質嗎?

取決於模式和工具。有損 WebP 會捨棄資訊。無損 WebP 可還原編碼的像素值,但中繼資料、描述檔、方向處理及完全透明像素下的 RGB 值仍可能改變。把 JPEG 再編碼成有損 WebP 可能增加世代損失,因此應從最佳母檔產生傳遞檔。

為何有些網站仍用 JPEG 而不用 WebP?

因接收端相容性、既有母檔、編輯器或 CMS 支援、郵件與輸出流程、快取複雜度及遷移成本,JPEG 仍可能適合。WebP 在要求的品質下不保證更小。請測試代表性素材,若其他變體沒有足夠實測效益就保留 JPEG。

立即處理 WebP 圖片

可在瀏覽器免費轉換與壓縮;所選檔案不會送到我們的圖片處理伺服器。