運用 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 格式的圖片」提示,修正這個問題即是本文的主軸。

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

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

安裝 WebP Express 外掛

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

設定 WebP Express

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

名稱設定值
Operation modeCDN friendly
Image types to convertBoth jpegs and pngs
Destination folderMingled
File extensionSet 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,完成測試。

參考資料