偵錯桐人

運用 WebP Express 外掛打造支援 Next-Gen 圖檔格式的 WordPress 網站

由

Ted Liou

發表於

APP

現在網站中的所使用的圖片格式大多都採用 JPEG 與 PNG 兩種，而圖片檔案的載入速度一直都是網站優化的一道關卡。為了能同時兼顧圖片的檔案大小與解析度，Google 在 2010 年釋出了全新的 WebP 圖片檔案格式，內容完全相同的圖片在 WebP 與 PNG 的測試後最高能節省近 48% 檔案大小，轉換 JPEG 格式的話還能節省更多空間，且能使轉換後的圖檔維持著轉換前的水準。

然而當前版本的 WordPress 內建媒體櫃尚不支援 WebP 圖檔格式的上傳，所以我們要來借用「WebP Express」外掛之手來打造可相容 WebP 格式的環境。

如下圖，當使用 Google PageSpeed Insights 服務來檢測尚未支援 WebP 圖檔的網站時都會出現「提供 next-gen 格式的圖片」提示，修正這個問題即是本文的主軸。

確認瀏覽器支援程度

我們為了要來做 WebP 格式支援當然要先使用支援此格式的瀏覽器來操作，這邊我拿已被原廠拋棄的 IE 瀏覽器來做示範。當你將 WebP 格式的圖片位址直接輸入到網址列中，不支援 WebP 格式的瀏覽器會直接下載 WebP 檔案而不是顯示圖片。

外掛資訊

設定說明

接下來從 WordPress 控制台進入 WebP Express 設定頁面，開始進行設定調整：

一、Operation mode

因不同環境需設置不一樣值，Operation mode 可以幫我們隱藏無用途的欄位。例如網站有使用 CDN 時，將 Operation mode 設定為「CDN friendly」可隱藏數個不必要的欄位，並提示需啟用 Alter HTML。

名稱說明
Varied image responses預設值，自動在支援 WebP 的瀏覽器中重導原非 WebP 影像至 WebP 格式，無支援此格式的瀏覽器不影響。
CDN friendly必需啟用 Alter HTML，自動於原始碼中插入 <source> 標示 WebP 影像路徑，
No conversion僅用於 WebP 位址重導，不進行轉檔。如網站使用其他方法轉檔至 WebP 格式者可用此設置。
Tweaked顯示所有欄位。

二、General

名稱說明
ScopeWebP Express 作用範圍：
1. Uploads Only：僅已上傳的影像。
2. Themes Only：僅佈景主題。
3. Uploads and themes：僅已上傳的影像與佈景主題。
4. All content：wp-content 資料夾下的所有影像。
5. Everything：所有影像，包含 wp-admin 資料夾下的圖檔。
Image types to work on需轉檔的影像格式：
1. None：不轉檔。
2. Only Jpegs：僅轉換 JPEG。
3. Only pngs：僅轉換 PNG。
4. Both jpegs and pngs：轉換 JPEG 與 PNG。
Destination folder轉檔後的影像資料夾位置，僅 wp-content/uploads 資料夾下影像有效：
1. In separate folder：單獨資料夾，位置為 wp-content/webp-express/webp-images/doc-root/wp-content/uploads。
2. Mingled：與原圖檔同一資料夾。
File extension副檔名格式，僅 Destination folder 為 Mingled 模式可用：
1. Append “.webp”：轉換後的影像名稱會變成 123.png.webp 或 123.jpeg.webp。
2. Set to “.webp”：直接設定為 123.webp。
Destination structure轉檔後影像資料夾結構：
1. Document root：建議值，所有轉檔後影像將會按照原結構移動至 wp-content/webp-express/webp-images/doc-root。
2. Image roots：使用原影像的結構，例如 wp-content/uploads/123.jpg 會變成 wp-content/uploads/123.webp，但如果 Destination folder 設定為 In separate folder 則會改置於 wp-content/webp-express/webp-images。
Cache-Control header快取標頭設定，一般會在伺服器上完成設定，故省略。
Prevent using webps larger than original防止轉檔後的檔案比原影像還大，如果網站以效能取向請啟用，如只是要提升 SEO 分數則取消。

三、Redirection rules

名稱說明
Enable redirection to converter?是否一律重導影像檔至轉換器，如已存在 WebP 版本與瀏覽器支援時回傳轉檔後圖檔，否則回傳原圖檔。
Do not pass source in Query String是否要忽略查詢字串，查詢字串為網址中 ? 後的所有文字。
Enable direct redirection to existing converted images?如已存在轉檔後影像，是否要直接重導至目標圖檔。
Create webp files upon request?是否要於請求時進行 WebP 轉檔，如已存在轉檔後圖檔時會直接回傳圖檔，否則回傳 404 錯誤並執行轉檔，待轉檔完成後即可正常運行。

四、Conversion

名稱說明
Jpeg optionsJPEG 圖檔壓縮方式、品質。
PNG optionsPNG 圖檔壓縮方式、品質。
Metadata元資料處理方式：
1. No metadata in webp：於 WebP 中移除所有元資料。
2. Copy all metadata to webp：保留所有元資料，多用於攝影作品，可記錄光圈、焦距等資料。
Conversion method是否要於請求時進行 WebP 轉檔，如已存在轉檔後圖檔時會直接回傳圖檔，否則回傳 404 錯誤並執行轉檔，待轉檔完成後即可正常運行。
Convert on upload是否要於上傳圖片時進行轉檔，啟用後會拖慢上傳的時間。
Enable logging是否啟用記錄檔。
Bulk convert批次轉檔。

五、Serve options

名稱說明
Response on failure失敗時回傳內容：
1. Original image：原圖檔。
2. 404：Error Not Found 錯誤。
3. Error report：錯誤報告
Response on success成功時回傳內容：
1. Original image：原圖檔。
2. Converted image：轉檔後影像。

六、Alter HTML

名稱說明
Replace tags with tags, adding the webp to srcset.預設值，以 <picture> 取代原圖程式碼，將 WebP 版本圖檔嵌入，由瀏覽器決定顯示何種圖片。
Replace image URLs直接取代圖檔位址，如網站有快取機制時可能不可用。

參考設定

上線測試

新增一篇文章並上傳一張圖片，並開啟瀏覽器開發人員介面檢視圖片程式碼，可發現已有 <source> 標籤位於 <img> 上方，內容中也有轉檔後的 WebP 影像位址。

參考資料