CLONE CODING

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

CloneCoding
Web / Node.js
2023年7月15日

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

為什麼選擇WebP？

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

設置Node.js

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

安裝所需模組

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

bash

npm install sharp imagemin imagemin-webp

將圖像轉換為WebP

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

javascript

const sharp = require('sharp');

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

壓縮WebP圖像

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

javascript

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

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

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

完整代碼

javascript

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));