使用 Imagemin 壓縮圖片

Katie Hempenius

為何要關注這項技術？

未壓縮的圖片會導致網頁包含不必要的位元組，由於圖片可能成為 Largest Contentful Paint (LCP) 的候選元素，這些不必要的位元組可能會增加圖片的資源載入時間，導致 LCP 時間變長。

右側相片比左側相片小 40%，但對一般使用者來說，兩者看起來可能一模一樣。

評估

執行 Lighthouse，檢查是否有壓縮圖片來提升載入網頁速度的機會。這些機會會列在「提高圖片編碼效率」下方：

Imagemin

Imagemin 支援多種圖片格式，且可輕鬆整合建構指令碼和建構工具，因此是圖片壓縮的絕佳選擇。Imagemin 可做為 CLI 和 npm 模組使用。一般來說，npm 模組是最佳選擇，因為提供更多設定選項，但如果您想試用 Imagemin，又不想修改任何程式碼，CLI 也是不錯的替代方案。

外掛程式

Imagemin 是以「外掛程式」為基礎建構而成。外掛程式是 npm 套件，可壓縮特定圖片格式 (例如「mozjpeg」會壓縮 JPEG)。熱門圖片格式可能有多個外掛程式可供選擇。

選擇外掛程式時，最重要的考量因素是外掛程式是否為「有損」或「無損」。無損壓縮不會遺失任何資料，有損壓縮會縮減檔案大小，但可能會降低圖片品質。如果外掛程式未提及是否為「有損」或「無損」，您可以從 API 判斷：如果可以指定輸出內容的圖片品質，則為「有損」。

對大多數人來說，有損外掛程式是最佳選擇。可大幅節省檔案大小，且可自訂壓縮程度，滿足您的需求。下表列出常見的 Imagemin 外掛程式。這些並非唯一可用的外掛程式，但都是專案的理想選擇。

Imagemin CLI

Imagemin CLI 適用於 5 種不同的外掛程式：imagemin-gifsicle、imagemin-jpegtran、imagemin-optipng、imagemin-pngquant 和 imagemin-svgo。Imagemin 會根據輸入內容的圖片格式，使用適當的外掛程式。

如要壓縮「images/」目錄中的圖片，並儲存到相同目錄，請執行下列指令 (會覆寫原始檔案)：

$ imagemin images/* --out-dir=images

Imagemin npm 模組

如要搭配套件組合工具使用 Imagemin，請確認所選套件組合工具是否提供外掛程式。舉例來說，webpack 是熱門的打包工具，可支援 Imagemin。如要進一步瞭解如何搭配 webpack 使用 Imagemin，請參閱這項程式碼研究室。

您也可以單獨使用 Imagemin 做為 Node 指令碼。 這段程式碼會使用「imagemin-mozjpeg」外掛程式，將 JPEG 檔案壓縮至 50 的品質 (「0」為最差，「100」為最佳)：

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async() => {
  const files = await imagemin(
      ['source_dir/*.jpg', 'another_dir/*.jpg'],
      {
        destination: 'destination_dir',
        plugins: [imageminMozjpeg({quality: 50})]
      }
  );
  console.log(files);
})();