這項新工具有何重要性？
WebP 圖片小於 JPEG 和 PNG 對應檔，通常檔案大小減少 25% 至 35%。這可以縮減頁面大小並改善效能。
- YouTube 發現，改用 WebP 縮圖可讓網頁載入速度加快 10%。
- Facebook 發現 JPEG 檔案的檔案大小減少了 25% 至 35%，改用 WebP 格式的檔案則可節省 80% 的檔案大小。
WebP 非常適合用於 JPEG、PNG 和 GIF 圖片。此外，WebP 提供無損壓縮和有損壓縮。在無損壓縮的情況下，不會遺失資料。失真壓縮可縮減檔案大小，但可能會降低影像品質。
將圖片轉換為 WebP 檔
使用者通常會使用下列其中一種方法，將圖片轉換為 WebP：cwebp 指令列工具或 Imagemin WebP 外掛程式 (npm 套件)。如果專案使用建構指令碼或建構工具 (例如 Webpack 或 Gulp)，Imagemin WebP 外掛程式通常是最佳選擇，而 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 等) 搭配使用。一般來說，您需要在建構指令碼或建構工具的設定檔中加入約 10 行的程式碼。以下是 Webpack、Gulp 和 Grunt 的執行這項操作範例。
如果您不是使用上述任一建構工具，則可單獨使用 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> 代碼會為零或多個 <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> 標記在眾多來源中可能會過長。以下是可提供 WebP 替代文字的 Apache mod_rewrite 規則：
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>
上方的重新編寫規則會針對任何要求的 JPEG 或 PNG 圖片尋找 WebP 版本。如果找到 WebP 替代網址，系統將透過正確的 Content-Type 標頭提供該 WebP。這可讓您以自動 WebP 支援功能使用如下的圖片標記：
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
驗證 WebP 使用情形
Lighthouse 可用來驗證網站上的所有圖片是否都是透過 WebP 提供。執行 Lighthouse 效能稽核 (依序點選「Lighthouse」>「選項」>「效能」)，然後尋找「提供新一代格式的圖片」稽核結果。Lighthouse 會列出任何不在 WebP 中的圖片。