使用WebP Cloud Services將網站圖片轉成WebP/AVIF

詳細介紹文可以看這篇：〈Hexo博客使用WebP Cloud Service〉。因為想加快網站連線速度，所以使用WebP Cloud Services將網站內部圖片轉成Webp/AVIF。圖片第一次載入速度不是很好，但尚可接受，不過載入過的圖片，因為Server端有快取，之後速度就很快了。

Webp Cloud Services第一次載入圖片的速度

根據開發者描述，圖片第一次載入速度慢的瓶頸是Server在轉檔時，消耗大量資源所造成。

與開發者對談

這算是一個幫網站圖片轉成Webp/AVIF的懶人服務，完全不用動到圖片原始連結和位置。免費帳號的請求額度應該夠用（每天登入會送你永久額度），200MB快取可能是問題，如果網站流量高、圖片多，快取很容易佔滿（會自動刪除）。

Webp Cloud Services Cache

每張圖會根據不同環境讀取壓縮快取，例如訪客的設備不支援WebP/AVIF，則提供的是原始圖檔格式，請參考〈Webp Cloud Cache status〉的說明。使用該項服務最終目的是要改善網站連線速度，需要長期使用一段時間才能得知是否對你的網站有幫助。

另外Hexo的hexo-webp-cloud-proxy只會處理文章內的圖片（文章外不處理，例如首頁），所以沒裝改用Webp Cloud Access的Rewrite after build方式來處理：

  1. 下載https://static.webp.se/convert.py，將檔案放到Hexo資料夾。

  2. 確認在Python3環境，安裝beautifulsoup4：

    pip3 install beautifulsoup4

  3. 每次執行完hexo g後再執行：

    python3 convert.py ./public "https://carlos.mynet.tw" "https://i.mynet.tw/"

以下是官網Script的說明：

This script will walk through all the html files under ./public folder, and change all the imgs’ src:

  • From /something_here to https://i.mynet.tw/something_here
  • From https://carlos.mynet.tw/something_here to https://i.mynet.tw/something_here