使用 WebP 圖片

Katie Hempenius
Katie Hempenius
X

為何要關注這項技術？

WebP 圖片的大小比 JPEG 和 PNG 圖片小，通常可減少 25 到 35% 的檔案大小。這麼做可以縮減網頁大小並改善效能。

  • YouTube 發現，改用 WebP 縮圖後，網頁載入速度可提升 10%。
  • 在 Facebook 改用 WebP 後，JPEG 檔案大小減少了 25% 至 35%，PNG 檔案大小則減少了 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 單獨用作 Node 指令碼。這個指令碼會轉換 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，並為舊版瀏覽器提供備用圖片：

變更前：

<img src="flower.jpg" alt="">

變更後：

<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 回應標頭，確保快取能夠瞭解圖片可能會根據 Accept 標頭提供不同的服務：

<FilesMatch ".(jpe?g|png)$">
  <IfModule mod_headers.c>
    Header set Vary "Accept"
  </IfModule>
</FilesMatch>

先前的重寫規則會尋找任何要求的 JPEG 或 PNG 圖片的 WebP 版本。如果找到 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」>「選項」>「成效」)，查看「以新一代格式提供圖片」稽核結果。Lighthouse 會列出未以 WebP 格式放送的圖片。