使用 Imagemin 壓縮圖片

Katie Hempenius

為何要關注這項技術？

未壓縮的圖片會大量佔滿您的網頁，並增加不必要的位元組。圖片可進行最大內容繪製 (LCP) 的候選，因此這些不必要的位元組可能會增加圖片的資源載入時間，也可能拉長 LCP 時間。

右側相片雖然比左側相片小 40%，但可能和一般使用者看起來一樣。

測量

執行 Lighthouse，透過壓縮圖片找出改善網頁載入速度的機會。 「有效編碼圖片」下方會列出這些商機：

圖像最小值

Imagemin 是圖片壓縮的理想選擇 並輕鬆與建構指令碼整合 工具。Imagemin 可做為 CLI 和 npm 模組。一般來說，npm 模組為 是最理想的選擇，因為它提供更多設定選項，但 CLI 可以 如果想在不接觸任何程式碼的情況下試用 Imagemin，

外掛程式

Imagemin 是以「外掛程式」為主軸，外掛程式是壓縮成 特定圖片格式 (例如「mozjpeg」會壓縮 JPEG)。熱門圖片格式 可能有多種外掛程式可供選擇

選擇外掛程式時，最重要的是考量 「光亮」或「失真」在無損壓縮的情況下，您不會遺失任何資料。有損 壓縮可縮減檔案大小，但可能會減少圖片 品質如果外掛程式未提及其「損失」或「無損」你 例如指定輸出內容的影像品質 就是「失真」

對大多數人來說，有損外掛程式是最好的選擇。優惠價格非常高 並能依需求自訂壓縮等級 下表列出熱門的 Imagemin 外掛程式。除了上述外掛程式外 但這些最佳做法適用於您的專案

映像檔 CLI

Imagemin CLI 可與 5 種不同的外掛程式搭配使用：imagemin-gifsicle imagemin-jpegtran、imagemin-optipng、imagemin-pngquant 和 imagemin-svgo， Imagemin 會根據模型的圖片格式 。

如要壓縮「images/」內的圖片並儲存到同一個 目錄，執行以下指令 (覆寫原始檔案)：

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

Imagemin npm 模組

如果您使用上述其中一項建構工具 以便使用 webpack、gulp、 或「grunt」。

您也可以單獨使用 Imagemin 做為 Node 指令碼， 這段程式碼使用「imagemin-mozjpeg」這個外掛程式能將 JPEG 檔案壓縮成畫質 (「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);
})();