為何要關注這項技術？
WebP 圖片小於 JPEG 和 PNG 格式的圖片，通常是 檔案大小減少 25% 至 35% 的規模。這會減少網頁大小 可增進效能
- YouTube 發現改用 WebP 縮圖後，成效可提升 10% 加快網頁載入速度。
- Facebook 成功 JPEG 檔案的大小減少 25-35%，且 PNG 大小可減少 80% 他們改用 WebP
WebP 可取代 JPEG、PNG 和 GIF 圖片。此外， WebP 同時提供無損壓縮和有損壓縮。無資料壓縮 (無資料) 就遺失了失真壓縮能縮減檔案大小，但代價是 降低影像品質
將圖片轉換為 WebP 檔
使用者通常會採用下列其中一種做法轉換圖片 轉換為 WebP： cwebp 指令列工具 或 Imagemin WebP 外掛程式 (npm 套件)。 如果您的專案使用建構版本，Imagemin WebP 外掛程式通常是最佳選擇 指令碼或建構工具 (例如 Webpack 或 Gulp)，但 CLI 是不錯的選擇 或您只需要轉換圖片一次
將圖片轉換為 WebP 時，您可以選擇 但對大多數人來說，這只需要 注重品質設定您可以在 0 中指定品質等級 (最差) 到 100 (最佳)。還是值得試玩 圖像品質和檔案大小 系統會按照資料類型和業務需求 將資料儲存到不同類型的儲存空間
使用 Cwebp
使用 cwebp 的預設壓縮設定來轉換單一檔案：
cwebp images/flower.jpg -o images/flower.webp
使用 50 的品質等級轉換單一檔案：
cwebp -q 50 images/flower.jpg -o images/flower.webp
轉換目錄中的所有檔案：
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
使用 Imagemin
Imagemin WebP 外掛程式可單獨使用，也可與慣用的建構工具搭配使用 (Webpack/Gulp/Grunt/etc.).這通常必須在 建構指令碼或建構工具的設定檔 以下舉例說明操作方式 Webpack、 Gulp 和 大量操作。
如果您並未使用上述任何一種建構工具，則能單獨使用 Imagemin
節點指令碼這個指令碼會轉換 images 目錄中的檔案，並
在 compressed_images 目錄中儲存這些檔案。
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
提供 WebP 圖片
如果您的網站僅支援與 WebP 相容 瀏覽器，則可停止朗讀。否則 會向新版瀏覽器提供 WebP，並為舊版瀏覽器提供備用圖片：
變更前：
html
<img src="flower.jpg" alt="">
變更後：
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
<picture>、
<source>,
和 <img> 標記，包括其相對順序
以達成此最終結果
<picture>
<picture> 代碼會為 0 個或多個 <source> 標記和一個 <img> 標記提供包裝函式。
<source>
<source> 標記會指定媒體資源。
瀏覽器會採用第一個列出的來源，採用支援的格式。如果瀏覽器不支援 <source> 標記中列出的任何格式，就會改回載入 <img> 標記指定的圖片。
<img>
<img> 標記能讓這個程式碼在瀏覽器上運作
不支援 <picture> 標記
如果瀏覽器不支援 <picture> 標記，系統會
忽略不支援的代碼。因此，它只會「看見」這個
<img src="flower.jpg" alt=""> 標記並載入該圖片。
讀取 HTTP Accept 標頭
如果您的應用程式後端或網路伺服器可讓您重新寫入要求，則可以讀取 HTTP Accept 標頭的值，以公告支援的替代圖片格式：
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
讀取這個要求標頭並根據回應內容重新編寫回應，有助於簡化圖片標記。<picture> 標記如果採用多種來源，可能會更長。以下 Apache mod_rewrite 規則可提供 WebP 替代版本：
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
如要使用這種連線方式，您必須設定 HTTP Vary 回應標頭，確保快取能得知圖片的放送類型可能不同：
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
上方的重寫規則會尋找 WebP 版本的任何要求 JPEG 或 PNG 圖片。如果找到 WebP 替代版本，系統會提供正確的 Content-Type 標頭。如此一來，您就能在自動支援 WebP 的情況下使用類似下列的圖片標記：
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
驗證 WebP 使用情形
Lighthouse 可用於驗證網站上的所有圖片是否都已正常放送 存取 WebP 檔案執行 Lighthouse 效能稽核 ([Lighthouse] > [選項] > Performance)，然後尋找「提供新一代圖片」的結果 格式稽核。Lighthouse 會列出所有未在 WebP。