[WordPress] 無痛轉換網站圖片格式為 WebP 的方法

本篇文章更新時間：2020/01/02
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。

新建立的站可以直接考慮使用 ShortPixel 這款外掛，每個月有額度免費使用，還滿多人推薦，相關資訊 Google 有不少。

但既然是新建立網站，怎會有痛！所以肯定是對於經營下去的網站來說。

對於網站內容中圖片要轉換格式使用 WebP （維基百科說明）其實考量點不少。

像是瀏覽器支援度還不夠全面，這個轉換是從檔案格式下手，所以要全站內容圖片都要替換，而替換還包含每篇文章內文的引用圖片連結。

想到就暈～

目前個人覺得最佳解法是套用 WordPress.com 官方開源釋出的圖片加速器工具 Photon，這套工具內建在 Jetpack 外掛裡，可以把圖片改由代理 CDN 的做法來重新處理圖片格式，提供 WebP 支援。

覺得 Jetpack 外掛太厚重的人也可以考慮自架這套 Photon 系統來處理，搭配網友開發的 My Photon 外掛連結自己架設的 Photon 服務。

如果還覺得那樣太麻煩其次可以考慮使用這款外掛： WebP Converter for Media

完全免費，使用上就是安裝好外掛設定好參數後，一次把網站上的圖片都轉換成 WebP 格式，搭配伺服器設定互動來對應請求。

這款外掛並非是把所有圖庫做轉換取代，而是把原圖庫的檔案轉換 WebP 格式後另儲存在 /wp-content/uploads-webpc/ 目錄下比照原 uploads 結構處理。

而伺服器端要搭配的就是需要安裝支援 WebP 格式版本的 PHP GD 或是 ImageMagick 模組，作為轉換圖片使用。

再來是伺服器補上 rewrite 設定，判斷請求時來轉換讀取對應的圖片。

Apache .htaccess 設定如下：

# BEGIN WebP Converter

  AddType image/webp .webp


  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.jpg.webp -f
  RewriteRule wp-content/uploads/(.+)\.jpg$ wp-content/uploads-webpc/$1.jpg.webp [T=image/webp]
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.jpeg.webp -f
  RewriteRule wp-content/uploads/(.+)\.jpeg$ wp-content/uploads-webpc/$1.jpeg.webp [T=image/webp]
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads-webpc/$1.png.webp -f
  RewriteRule wp-content/uploads/(.+)\.png$ wp-content/uploads-webpc/$1.png.webp [T=image/webp]


  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"

# END WebP Converter

而這麼巧我用 Nginx 他沒寫.. 所以自己補了，需寫在設定檔案 server 的區塊中，如下：

if ($http_accept ~ "image/webp"){
        rewrite wp-content/uploads/(.+)\.jpg$ /wp-content/uploads-webpc/$1.jpg.webp;
}
if ($http_accept ~ "image/webp"){
        rewrite wp-content/uploads/(.+)\.jpeg$ /wp-content/uploads-webpc/$1.jpeg.webp;
}
if ($http_accept ~ "image/webp"){
        rewrite wp-content/uploads/(.+)\.png$ /wp-content/uploads-webpc/$1.png.webp;
}
location ~* ^/wp-content/uploads-webpc/(.+)\.webp$ {
        try_files $uri /wp-content/uploads/$1 =404;
}

以上，都設定好重新瀏覽頁面時打開 Chrome 開發者工具，查看 Network 分頁中的 img 選項就可以看到 type 變成 webp 了！