現在網站中的所使用的圖片格式大多都採用 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,完成測試。
