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

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

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

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

Index

1. 如何確認你的瀏覽器是否支援 WebP？
2. 安裝 WebP Express 外掛
3. 設定 WebP Express
4. 上線測試
5. 參考資料

如何確認你的瀏覽器是否支援 WebP？

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

安裝 WebP Express 外掛

到 WebP Express 外掛頁面下載或者在你的 WordPress 控制台中搜尋並安裝此外掛。

設定 WebP Express

接下來從 WordPress 設定進入 WebP Express 頁面，我們先來調整頁面上半部的設定值。

名稱	設定值
Operation mode	CDN friendly
Image types to convert	Both jpegs and pngs
Destination folder	Mingled
File extension	Set to “.webp”
Create webp files upon request?	☑

再來我們轉到下面 Alter HTML 的地方，把 Alter HTML? 選取框打勾，並繼續以下設定。

名稱	設定值
What to replace:	☑ Replace <img> tags with <picture> tags, adding the webp to srcset.
	☑ Dynamically load picturefill.js on older browsers
	☑ Reference webps that hasn’t been converted yet
Where to replace:	☑ Use content filtering hooks (the_content, the_excerpt, etc)