為何要關注這項技術？
未壓縮的圖片會使網頁顯得多餘的位元組。由於圖片可能適用於最大內容繪製 (LCP)，因此不必要的位元組可能會增加圖片的資源載入時間，進而導致 LCP 時間加長。
右側的相片比左側相片少 40%，但看起來可能與一般使用者相同。
|
|
|
|---|
測量
執行 Lighthouse 來檢查壓縮圖片時，是否應改善頁面載入速度。 這些機會會列在「有效將圖片編碼」下方：
圖像
Imagemin 是支援多種圖片格式的絕佳選擇，能與建構指令碼和建構工具輕鬆整合。Imagemin 可做為 CLI 和 npm 模組。一般來說，npm 模組是最佳選擇，因為該模組提供了更多設定選項，但如果您想在不接觸任何程式碼的情況下試用 Imagemin，CLI 會是相當不錯的替代方案。
外掛程式
Imagemin 是以「外掛程式」為中心所建構。外掛程式是壓縮特定圖片格式 (例如「mozjpeg」會壓縮 JPEG) 的 npm 套件。熱門圖片格式可能有多個外掛程式可供選擇。
選擇外掛程式時，請最要考慮的是「失真」或「無損」。進行無損壓縮時，不會遺失任何資料。有損壓縮可縮減檔案大小，但可能會降低影像品質。如果外掛程式沒有指出「失真」或「無損」，您可以透過其 API 來指示：如果您能夠指定輸出的影像品質，就會是「失真」。
對大多數使用者而言，有損外掛程式是最好的選擇。這些程式庫可大幅節省檔案大小，而您可以依據自身需求自訂壓縮等級。下表列出熱門的 Imagemin 外掛程式。這些外掛程式不是唯一的可用外掛程式，但這些都是專案不錯的選擇。
| 圖片格式 | 有損外掛程式 | 無損外掛程式 |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
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);
})();