使用 Imagemin 壓縮圖片

Katie Hempenius

這項新工具有何重要性？

未壓縮的圖片會使網頁顯得多餘的位元組。由於圖片可能適用於最大內容繪製 (LCP)，因此不必要的位元組可能會增加不必要的資源載入時間，進而造成 LCP 時間增加。

右側的相片比左側相片少 40%，但看起來可能與一般使用者相同。

測量

執行 Lighthouse 來檢查壓縮圖片時，是否應改善頁面載入速度。 這些機會會列在「有效將圖片編碼」下方：

圖像

Imagemin 是支援多種圖片格式的絕佳選擇，能與建構指令碼和建構工具輕鬆整合。Imagemin 可做為 CLI 和 npm 模組。一般來說，npm 模組是最佳選擇，因為該模組提供了更多設定選項，但如果您想在不接觸任何程式碼的情況下試用 Imagemin，CLI 會是相當不錯的替代方案。

外掛程式

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

選擇外掛程式時，請最要考慮的是「失真」或「無損」。進行無損壓縮時，不會遺失任何資料。有損壓縮可縮減檔案大小，但可能會降低影像品質。如果外掛程式沒有指出「失真」或「無損」，您可以透過其 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、gulp 或 grunt 程式碼研究室。

您也可以單獨使用 Imagemin 做為節點指令碼。此程式碼使用「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);
})();