本頁面由 Cloud Translation API 翻譯而成。

常見問題

什麼是 WebP？為什麼要使用？

WebP 是有損壓縮和無損壓縮的方法，可用於大型作業從網路上找到的各種相片、半透明和圖像圖片。有損壓縮的程度可調整，因此使用者可以選擇權衡檔案大小與圖片品質之間的平衡WebP 通常能達到比起 JPEG 和 JPEG 2000，在圖片未遺失的情況下，壓縮率平均高出 30% 品質 (請參閱比較研究)。

WebP 格式主要是為了製作更小而美觀的圖片目的在於提升網頁速度。

哪些網路瀏覽器原生支援 WebP？

能夠輕鬆提高網站效能的網站管理員針對現有圖片進行最佳化的 WebP 替代方案，並透過根據這些網頁鎖定支援 WebP 的瀏覽器。

WebP 損失支援
- Google Chrome (電腦版) 17 以上版本
- 適用於 Android 25 以上版本的 Google Chrome
- Microsoft Edge 18 以上版本
- Firefox 65 以上版本
- Opera 11.10 以上版本
- 內建網路瀏覽器，Android 4.0 以上版本 (ICS)
- Safari 14 以上版本 (iOS 14 以上版本、macOS Big Sur+)
WebP 有損和無損Alpha 版支援
- Google Chrome (電腦版) 23 以上版本
- 適用於 Android 25 以上版本的 Google Chrome
- Microsoft Edge 18 以上版本
- Firefox 65 以上版本
- Opera 12.10 以上版本
- Android 4.2 以上版本 (JB-MR1) 的原生網路瀏覽器
- 白月 26 歲以上
- Safari 14 以上版本 (iOS 14 以上版本、macOS Big Sur+)
WebP 動畫支援
- Google Chrome (電腦版和 Android) 32 以上版本
- Microsoft Edge 18 以上版本
- Firefox 65 以上版本
- Opera 19 歲以上
- Safari 14 以上版本 (iOS 14 以上版本、macOS Big Sur+)

另請參閱：

如何偵測對 WebP 的瀏覽器支援？

建議你只向能夠顯示圖片的用戶端提供 WebP 圖片並視情況改回使用舊版格式幸運的是有多種技術可以偵測 WebP 支援，用戶端和伺服器端部分 CDN 供應商提供 WebP 支援偵測功能以備不時之需

透過 Accept 標頭進行伺服器端內容協商

網路用戶端傳送 [接受] 欄位很常見要求標頭，指出他們願意回應的內容格式如果瀏覽器事先指出它將「接受」image/webp 格式網路伺服器知道可以安全地傳送 WebP 圖片，大幅簡化進行內容協商詳情請參閱下方連結。

Modernizr

Modernizr 是 JavaScript 程式庫，方便您偵測 HTML5 和網路瀏覽器支援 CSS3 功能。尋找屬性 Modernizr.webp、Modernizr.webp.lossless、Modernizr.webp.alpha 和 Modernizr.webp.animation。

HTML5 `<picture>` 元素

HTML5 支援 <picture> 元素，這類元素可讓您列出多個替代圖片目標的優先順序，這樣用戶端就會第一張可正確顯示的候選圖片。詳情請見這篇 HTML5 Rocks 討論文章。<picture> 元素是更多瀏覽器支援。

在自己的 JavaScript 中

另一個偵測方法是嘗試解碼極小的 WebP 圖像應該使用特定功能並確認是否成功範例：

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

請注意，圖片載入功能屬於非阻塞性且非同步。也就是說建議將需要 WebP 支援的程式碼放在回呼中函式。

Google 為何發布 WebP 做為開放原始碼？

我們深信開放原始碼模型的重要性。採用 WebP 格式開放原始碼，任何人都能使用該格式並提出改善建議。取代為您的輸入和建議後，我們相信 WebP 會更加實用顯示長期下來的圖形格式結果

如何將個人圖片檔轉換為 WebP？

您可以使用 WebP 指令列公用程式轉換個人圖片檔轉換為 WebP 格式詳情請參閱使用 WebP。

如果您有許多要轉換的圖片，可以使用平台的殼層可簡化作業舉例來說，如要轉換資料夾中的所有 jpeg 檔案，請嘗試包括：

Windows：

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / macOS：

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

如何自行判斷 WebP 圖片品質？

目前只要將 WebP 檔案轉換成通用格式，就能查看檔案內容然後使用 PNG 等無損壓縮檔案，然後查看任何瀏覽器或圖片檢視器。如要快速瞭解 WebP 品質，請參閱這個網站上的圖片庫並排顯示相片比較。

如何取得原始碼？

您可以在 WebP 開放原始碼專案的下載部分頁面。輕量解碼器和 VP8 規格的程式碼 WebM 網站。詳情請參閱容器的「RIFF Container」頁面規格。

WebP 圖片的大小上限為何？

WebP 與 VP8 相容，並使用 14 位元的寬度和高度。 WebP 圖片的最大像素尺寸為 16383 x 16383。

WebP 格式支援哪些色域？

與 VP8 位元串流一致，lossy WebP 僅適用於 8 位元 Y'CbCr 4:2:0 (通常稱為 YUV420) 圖片格式。請參閱相關章節 2，「格式總覽」 RFC 6386 VP8 資料格式和解碼指南，掌握更多詳細資訊。

Lossless WebP 僅適用於 RGBA 格式。詳情請參閱 WebP 無損 Bitstream 規格。

WebP 圖片的尺寸是否能大於來源圖片？

是，通常是從有損格式轉換為 WebP 無損格式，或是反之亦然這主要是因為色域有差異 (YUV420 與 ARGB) 以及這兩者之間的轉換

一般會有三種情況：

如果來源圖片採用無損 ARGB 格式，空間取樣預計推出的 YUV420 將引入新的顏色，原始版本這種情況通常發生在來源採用 PNG 格式，但顏色很少：轉換為有損 WebP 格式 (或者，您也可以用類似的方式可能導致檔案變大。
如果來源採用有損格式，請使用無損 WebP 壓縮以獲取來源的有損性質，通常會導致大型檔案這並不適用於 WebP，且會在例如，將 JPEG 來源轉換成無損的 WebP 或 PNG 格式。
如果來源採用有損格式，你要壓縮的來源和具有較高品質設定的 WebP 檔案。舉例來說將畫質為 80 的 JPEG 檔案轉換成品質為 95 的 WebP 檔案即使兩種格式都失真，檔案通常較大。評估來源品質通常不可能，因此建議您如果檔案大小持續增加，則降低目標 WebP 品質。另一種方式是避免使用品質設定使用 cwebp 工具中的 -size 選項指定特定檔案大小。或對等的 API例如，指定原始檔案的 80% 則可能更為穩健

請注意，將 JPEG 來源轉換成有損 WebP 的 WebP，或將 PNG 來源轉換成無損檔案 WebP 不太容易出現這種檔案大小增加的問題。

WebP 支援漸進式或交錯顯示螢幕嗎？

WebP 無法在 JPEG 或 PNG 的用法。所以很可能會為因此必須完整傳遞解壓縮系統

平均而言，解碼漸進式 JPEG 圖片相當於 基準線 1 次。

另外，WebP 還提供漸進式解碼功能，透過位元串流的位元組會用來嘗試產生可顯示的範例列，如這可以節省用戶端並顯示下載狀態的視覺提示。增量方法則是透過進階解碼 API。

如何在 Android 專案中使用 libwebp Java 繫結？

WebP 支援對簡易編碼器和解碼器進行 JNI 繫結 swig/ 目錄中的介面。

在 Eclipse 中建構程式庫：

請確認您有 ADT 外掛程式隨著 NDK 工具一併安裝，並正確設定 NDK 路徑 (依序點選「偏好設定」>「Android」>「NDK」)。
建立新專案：檔案 >新增 >「Project」(專案) >Android 應用程式專案。
複製或將 libwebp 解壓縮至新專案中名為 jni 的資料夾。
將 swig/libwebp_java_wrap.c 新增至 LOCAL_SRC_FILES 清單。
在新專案上按一下滑鼠右鍵，然後選取「Android Tools」>新增原生支援...，即可在建構中加入程式庫。
開啟專案屬性，然後前往「C/C++ Build」>行為。新增將 ENABLE_SHARED=1 新增至 Build (Incremental build) 區段，以便進行建構 libwebp 做為共用資料庫

注意：設定 NDK_TOOLCHAIN_VERSION=4.8 會全面改善 32 位元建構效能。
將 swig/libwebp.jar 新增至 libs/ 專案資料夾。
建構您的專案。這會建立libs/<target-arch>/libwebp.so。
使用 System.loadLibrary("webp") 在執行階段載入程式庫。

請注意，您可以使用 ndk-build 和以下指令，手動建構程式庫 Android.mk。在這種情況下，上述某些步驟可以重複使用。

如何將 libwebp 與 C# 搭配使用？

WebP 可以建立為匯出 libwebp API 的 DLL。這類函式然後在 C# 中匯入

建構 libwebp.dll。這會正確設定 WEBP_EXTERN，以便匯出 API 函式。
```
libwebp> nmake /f Makefile.vc CFG=release-dynamic
```

將 libwebp.dll 新增至專案，並匯入所需函式。請注意，如果您使用簡單 API 您應呼叫 WebPFree() 以釋放任何傳回的緩衝區。

[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride,
                                 float quality_factor, out IntPtr output);
[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPFree(IntPtr p);

void Encode() {
  Bitmap source = new Bitmap("input.png");
  BitmapData data = source.LockBits(
      new Rectangle(0, 0, source.Width, source.Height),
      ImageLockMode.ReadOnly,
      PixelFormat.Format32bppArgb);
  IntPtr webp_data;
  const int size = WebPEncodeBGRA(data.Scan0,
                                  source.Width, source.Height, data.Stride,
                                  80, out webp_data);
  // ...
  WebPFree(webp_data);
}

為什麼要使用動畫 WebP？

WebP 動畫與 GIF 動畫的優點

WebP 支援採用 8 位元 Alpha 色頻的 24 位元 RGB 顏色， GIF 的 8 位元色彩和 1 位元 Alpha。
WebP 支援有損和無損壓縮；事實上動畫可以結合有損和無損影格GIF 僅支援無損壓縮WebP 的有損壓縮技術非常適合使用根據真實影片生成的動畫圖片例如動畫圖片的來源
WebP 需要的位元組數比 GIF 少¹。轉換成有損 WebP 的 GIF 動畫縮小 64%，且無失真 WebP 的大小減少 19%。這對行動網路尤其重要。
在跳轉時使用 WebP 可以縮短解碼時間。於閃爍、捲動或切換分頁，隱藏及顯示圖片，使動畫暫停，跳轉至不同的點耗用過多 CPU 資源捨棄影格時，解碼器也可能會要求解碼器動畫。在這些情況下，WebP 動畫的將時間解碼為 GIF²，進而減少卡頓並在 CPU 使用率高峰內復原這是因為 WebP 與 GIF 相比有以下兩個優點：
- WebP 圖片會儲存每個影格是否包含 Alpha、也不必將影格解碼即可做出判斷。如此一來，就能更準確地推斷出前一個影格中的特定影格因此先前的解碼器相輔相成。
- WebP 編碼器與現代影片編碼器類似索引鍵影格的時間 (大部分 GIF 編碼器沒有)。大幅改善長時間動畫的跳轉效果。促進在不影響圖片大小的情況下，插入這類頁框新增「blending 方法」標記。這可讓主要畫面格在完全清除圖片的情況下進行繪製就能直接切換至背景顏色，而不強制使用上一個影格原尺寸。

WebP 動畫與 GIF 動畫的缺點

在沒有跳轉的情況下，WebP 的直線解碼功能比 GIF 耗用大量 CPU 資源。失真 WebP 所需的解碼時間是 GIF 圖片，而無損 WebP 的處理速度是 1.5 倍的 1.5 倍。
WebP 支援不像 GIF 一樣廣泛，能有效普遍。
在瀏覽器中新增 WebP 支援可增加程式碼足跡，並攻擊面在 Blink 中，這約 1500 行額外程式碼 (包括 WebP demux 程式庫和 Blink-side WebP 映像檔) 編碼器或解碼器請注意，如果 WebP 和 WebM 共用較常見的解碼程式碼，或如果 WebP 的功能會在 WebM 中化為收益

為何不在 <img> 中支援 WebM？

將「<img>」支援的影片格式長期下來可能比較合適標記之前。不過，現在這麼做，使用 <img> 中的 WebM 可填入意圖而先前提過的 WebP 動畫角色會產生問題：

將依賴先前的影格的影格解碼時，WebM 會要求多出 50% 的記憶體先前的影格³
視訊轉碼器和容器的支援情況會因瀏覽器和裝置。協助自動進行內容轉碼 (例如節省頻寬的 Proxy)，瀏覽器在需要標頭的情況下指出其圖片代碼支援的格式。即便如此則不像「video/webm」等 MIME 類型或「video/mpeg」靜止不會顯示在轉碼器支援關係中 (例如 VP8 與 VP9)。另一部 WebP 格式確實凍結了，同意傳送動畫 WebP，這是所有通用 Analytics 中的 WebP 行為必須一致；且從「image/webp」接受標頭為用於表示 WebP 支援，不接受新的接受標頭。
Chromium 影片堆疊已針對以下工具進行最佳化：順暢播放，並假設某個裝置上只有一或兩部影片讓應用程式從可以最快做出回應的位置回應使用者要求因此，該在使用的系統上會積極實作讓播放品質達到最大水準。這類這種做法就無法同時適用於許多同步影片，需要重新設計，適合用於處理大量圖片的網頁。
WebM 目前沒有納入所有壓縮技術從 WebP 載入檔案因此。使用 WebP 的壓縮效果明顯優於其他替代方案：

¹ 對於 GIF 動畫與 WebP 動畫的所有比較，使用的語料庫包含約 7000 張隨機從網路上隨機取得的 GIF 動畫圖片。這些圖片已透過「gif2webp」轉換為動畫 WebP工具使用預設設定 (根據 libwebp 原始碼樹狀結構截至 2013 年 10 月 8 日)。比較數字是這些維度的平均值所以映像檔較小

² 使用最新的 libwebp + ToT 計算解碼時間截至 2013 年 10 月 8 日建立基準工具「解碼時間」跳轉」計算為「解碼前 5 個影格、清除影格緩衝區快取、解碼接下來的五個影格等

³ WebM 會在記憶體中保留 4 個 YUV 參考影格，每個影格儲存 (寬度 +96)*(高度 +96) 像素。YUV 4:2:0 每 6 需要 4 個位元組或每像素 3/2 位元組。因此，這些參考框架會使用 4*3/2*(width+96)*(height+96) 位元組的記憶體。另一方面只需要前一個影格 (採用 RGBA) 即可； 4*width*height 位元組的記憶體。

⁴ 動畫 WebP 算繪功能需要使用 Google Chrome 32 以上版本