現在網站中的所使用的圖片格式大多都採用 JPEG 與 PNG 兩種，而圖片檔案的載入速度一直都是網站優化的一道關卡。為了能同時兼顧圖片的檔案大小與解析度，Google 在 2010 年釋出了全新的 WebP 圖片檔案格式，內容完全相同的圖片在 WebP 與 PNG 的測試後最高能節省近 48% 檔案大小，轉換 JPEG 格式的話還能節省更多空間，且能使轉換後的圖檔維持著轉換前的水準。
然而當前版本的 WordPress 內建媒體櫃尚不支援 WebP 圖檔格式的上傳，所以我們要來借用「WebP Express」外掛之手來打造可相容 WebP 格式的環境。
如下圖，當使用 Google PageSpeed Insights 服務來檢測尚未支援 WebP 圖檔的網站時都會出現「提供 next-gen 格式的圖片」提示，修正這個問題即是本文的主軸。
如何確認你的瀏覽器是否支援 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) |
上線測試
WebP Express 設定完成後，如有使用快取外掛要先清除快取，再用支援 WebP 的瀏覽器開啟網站看看文章圖片是否已自動轉換為 .webp 格式。
先使用瀏覽器的開發者工具查看在圖片的 <img> 原始碼前後加上了 <picture> </picture> 標籤，並檢查前面的 <source> 中是否存在有效的 WebP 圖片網址。
最後用滑鼠右鍵 > 在新分頁中開啟圖片 檢查開啟的圖片網址最後是否為 .webp，完成測試。
參考資料
- JPG to WebP – Comparing Compression Sizes
- PNG to WebP – Comparing Compression Sizes
- Serve Images in Next-Gen Formats
- WebP Express Plugins
