將圖片轉為 Webp 格式以減少載入時間

前言

我們都知道理想的網頁應該在最短的時間內開啟，然而圖片往往是拖慢網頁速度的重要因素之一，所以優化圖片不僅可以大幅度提升加載速度還能降低網路的流量。

不過對圖片壓縮至一定程度後有可能發生失真或者檔案小不了多少的情況，如果有發生上述兩種限制，除了使用常見的 JPEG 或 PNG 格式外，也可以參考今天要講的主題，Webp 格式。

什麼是 Webp？

Webp 是一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8，根據 Google 測試結果，無損壓縮後的 Webp 比 PNG 少了 45% 的檔案大小，且即使 PNG 經過其他壓縮工具壓縮後 Webp 還是可以減少 28% 的文件小。

Webp 的好處

1. Webp 格式可以提供更好的壓縮比和更小的文件小，可以減少網路傳輸，使得網路傳輸的速度更快

2. 網路傳輸的流量減少，可以節省 CDN 的流量消耗，節省戴寬成本。

3. 如果仍有部分客戶端不支持 Webp 格式，可通過 CDN 層判斷，對於支持的客戶端響應 Webp 格式圖片，不支持的部分響應原圖，從而實現無縫自適應。

使用 Node.js 實作 image 轉 Webp

1. 安裝套件

npm install imagemin imagemin-webp

2. 手寫 script：

// index.js
const imagemin = require('imagemin')
const webp = require('imagemin-webp')

const convertImages = async () => {
  const files = ['./images/*.{jpg,png}']

  const config = {
    destination: './output',
    plugins: [webp({ quality: 100 })],
  }

  await imagemin(files, config)

  console.log('已將圖片轉成 webp !')
}

convertImages()

上面的代碼會把 images 資料夾裡的所有 .jpg 和 .png 圖檔轉成 .webp 格式再輸出至 output 資料夾

3. 執行

node index.js