本篇文章更新時間:2020/01/02
如有資訊過時或語誤之處,歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉!歡迎入群聊聊~


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

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

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

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

想到就暈~

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

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

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

WebP Converter for Media

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

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

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

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

Apache .htaccess 設定如下:

# BEGIN WebP Converter
<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>
<IfModule mod_rewrite.c>
  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]
</IfModule>
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
</IfModule>
# 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 了!


Share:

作者: Chun

資訊愛好人士。主張「人人都該為了偷懶而進步」。期許自己成為斜槓到變進度條 100% 的年輕人。[//////////____30%_________]

參與討論

14 則留言

  1. 可惜,剛剛手腳快了點,弄了個小外掛的本地化,你介紹的這個,只能是今年第二個。

    這位開發者看了名字,覺得是波蘭人 (我以前有波蘭文專案),一看果然沒錯。

    他開發的 3 個外掛看來目的、功能都很單純,所以字串很少,等會回家搞搞。

  2. Alex Lion 看起來其他兩款不錯,不過我都沒有用到,所以不急著本地化 哈哈

  3. 我看不太懂程式碼優劣,但是肯為自己的外掛做出統一風格圖示的開發者,品質都不會太差。

    因為個性肯定有點龜毛…

  4. 這個外掛的本地化完成了,等會就會推送。

    如果你有特意弄出錯誤訊息,並發現錯誤訊息有誤,直接跟我說,我來改。

    因為我大概只有錯誤訊息不那麼確定。

    應該沒大錯誤才對。

    可以故意不讓網站使用 REST API 試試。

  5. 一介資男您好,我是剛開始學習wordpress的新手,圖片優化一直困擾著我,因把圖片都放入wordpress的媒體庫會產生多個大小造成肥大日後網站會越來越慢,所以目前做法是使用Chevereto自架圖床比較好管理,圖片就只能用外連Url方式來呈現,但目前都是使用webp格式,最近才發現safari不支援webp(慘~safari上圖片全部空白。想請問資男,因我找到的方法都是針對wordpress媒體庫做webp轉換,若是像我外連url有沒有方法或是外掛可以做到判斷瀏覽器支援程度去顯示jpg/png或是webp的功能呢

    1. 可以使用 HTML5 的 source 標籤來處理瀏覽器相容性問題。 參考: https://stackoverflow.com/questions/58487035/how-to-add-webp-support-in-safari-browser

      針對 WordPress 這邊會產生出很多不必要縮圖的解法會建議你參考我這兩篇: [WordPress] 加速網站!禁止主題或外掛產生多餘縮圖格式
      https://www.mxp.tw/6734/ 、 [WordPress] 清除多餘未使用縮圖,釋放伺服器空間的適當方法 https://www.mxp.tw/5902/

      外連圖片的管理其實並不會比較輕鬆與省資源,不過當然這與你的寫作習慣有關係,個人是覺得稍嫌麻煩了。日後要透過 WordPress 外掛來解決圖片資源分離都還有機會,絕大部份的困擾在市占率 40% 的 WordPress 框架下,幾乎都有解,可以再多爬爬文~

      1. HI資男您好~非常感謝您的回覆,這對我很有幫助,Google 圖片最佳做法https://developers.google.com/search/docs/advanced/guidelines/google-images?hl=zh-tw 也是使用picture標籤,但是如果要使用這個picture標籤,每個圖片我都要產生兩個檔案(jpg/png&webp)然後再去手動作連結,這實在很厚工(台語XD,所以資男您會建議一個全新的wordpress網站如果要使用webp,就直接把圖片放媒體庫然後用ShortPixel去做轉換就好嗎?您建議新網站怎麼管理媒體庫呢?

        1. 對,正是因為如果要這樣滿足每個瀏覽器條件的話很麻煩,所以我才會說一般不會這樣「手動」。

          不管是不是全新的 WordPress 站,除非等流量大後有主機讀寫效能考量,圖片放媒體庫都是最順手!而滿足 WEBP 格式的做法也很多,我更取向不要把原始圖片壓縮成多份(不然不就跟你上一個問題依樣,多版本的問題?),所以我的操作是套用 Jetpack 的 Photon CDN API 服務。也有開源這樣的動態縮圖功能,想自架一個也不是問題: https://developer.wordpress.com/docs/photon/

          本 Blog 也有套用,你可以觀察 Chrome 讀取有套用媒體的格式,看是不是 WEBP 囉~ (但個人觀點是上傳越小越清楚的圖,比特定格式處理起來更方便,專注內容產生才是真的)

          1. Hi資男~非常感謝您耐心地回覆,目前對於媒體庫規劃比較有點方向了,真的~內容才是做重要的,感謝您解決我的疑問!祝好人一生平安

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *