圖像優化：在Node.js中轉換並壓縮PNG，JPG為WebP

數位時代已將圖像置於我們的瀏覽體驗前沿。然而，問題是這些圖像往往佔用了大量的頻寬，影響網站的性能。通過一個稱為圖像優化的過程，我們可以減小圖像尺寸。在本文中，我們將探討如何使用Node.js將PNG和JPG等圖像文件轉換為WebP並進行壓縮。

# 為什麼選擇WebP？

WebP是由Google開發的現代圖像格式，為Web圖像提供優質的無損和有損壓縮。通過將PNG和JPG文件轉換為WebP，我們可以實現更小的文件大小，同時不損壞圖像質量，從而使我們的網站加載速度更快。

# 設置Node.js

在開始轉換過程之前，讓我們確保已經安裝了Node.js。如果還沒有安裝，請根據您的操作系統下載並安裝。

# 安裝所需模組

我們將使用兩個npm包：sharp用於圖像轉換，imagemin-webp用於圖像壓縮。

npm install sharp imagemin imagemin-webp

# 將圖像轉換為WebP

讓我們使用sharp模組將PNG或JPG圖像轉換為WebP。這是通過讀取輸入文件並將其轉換為WebP格式來完成的。

const sharp = require('sharp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => console.log('圖像轉換完成。'))
  .catch(err => console.error(err));

# 壓縮WebP圖像

接下來，讓我們使用imagemin-webp模組壓縮轉換後的WebP圖像。

const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

(async () => {
  await imagemin(['output.webp'], {
    destination: 'compressed_images',
    plugins: [
      imageminWebp({quality: 50})
    ]
  });

  console.log('圖像壓縮完成。');
})();

# 完整代碼

const sharp = require('sharp');
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');

sharp('input.png')
  .webp()
  .toFile('output.webp')
  .then(() => {
    (async () => {
      await imagemin(['output.webp'], {
        destination: 'compressed_images',
        plugins: [
          imageminWebp({quality: 50})
        ]
      });

      console.log('圖像轉換和壓縮完成。');
    })();
  })
  .catch(err => console.error(err));

這個完整腳本將把您的圖像轉換為WebP格式並進行壓縮。

# 結論

這就是在Node.js中將PNG和JPG轉換為WebP並進行壓縮的高效方式。現在，您可以優化圖像、加快網站加載時間並提供更好的用戶體驗。通過一點點的練習，這些步驟將變得自然而然。

# 常見問題

1. 為什麼我應該使用WebP而不是PNG或JPG？ WebP提供了優越的壓縮效果，可以減小文件大小而不會明顯降低圖像質量。

2. 為什麼我們需要壓縮圖像？ 壓縮圖像可以減小文件大小，從而大大提高網站加載速度並節省頻寬。

3. 我可以使用其他編程語言執行此任務嗎？ 是的，其他語言如Python、Java等也有用於圖像轉換和壓縮的庫。然而，本教程專注於Node.js。

4. 如果轉換或壓縮過程失敗怎麼辦？ 請確保正確安裝了Node.js和所有所需的模組。如果問題仍然存在，問題可能與圖像本身有關。

5. 我可以調整壓縮程度嗎？ 是的，imagemin-webp插件允許您調整質量參數以控制壓縮程度。