運用 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 格式支援當然要先使用支援此格式的瀏覽器來操作,這邊我拿已被原廠拋棄的 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 影像位址。

參考資料

在〈運用 WebP Express 外掛打造支援 Next-Gen 圖檔格式的 WordPress 網站〉中有 2 則留言

  1. 您好,我無意間看到您這一篇介紹webp express外掛的教學,因此想要安裝來實際使用看看,希望能增加網站的速度,但這篇文章的設定似乎跟現在的版本有蠻大的差別,不曉得方便請教您目前最新版本的設定方式嗎?感謝!

    回覆

發表迴響