新建立的站可以直接考慮使用 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%_________]

參與討論

9 則留言

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

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

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

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

    因為個性肯定有點龜毛…

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

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

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

    應該沒大錯誤才對。

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

發佈留言

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