為何要關注這項技術？
未壓縮的圖片會大量佔滿您的網頁，並增加不必要的位元組。圖片可進行最大內容繪製 (LCP) 的候選，因此這些不必要的位元組可能會增加圖片的資源載入時間，也可能拉長 LCP 時間。
右側相片雖然比左側相片小 40%，但可能和一般使用者看起來一樣。
|
|
|
|---|
測量
執行 Lighthouse，透過壓縮圖片找出改善網頁載入速度的機會。 「有效編碼圖片」下方會列出這些商機：
圖像最小值
Imagemin 是圖片壓縮的理想選擇 並輕鬆與建構指令碼整合 工具。Imagemin 可做為 CLI 和 npm 模組。一般來說，npm 模組為 是最理想的選擇，因為它提供更多設定選項，但 CLI 可以 如果想在不接觸任何程式碼的情況下試用 Imagemin，
外掛程式
Imagemin 是以「外掛程式」為主軸，外掛程式是壓縮成 特定圖片格式 (例如「mozjpeg」會壓縮 JPEG)。熱門圖片格式 可能有多種外掛程式可供選擇
選擇外掛程式時，最重要的是考量 「光亮」或「失真」在無損壓縮的情況下，您不會遺失任何資料。有損 壓縮可縮減檔案大小，但可能會減少圖片 品質如果外掛程式未提及其「損失」或「無損」你 例如指定輸出內容的影像品質 就是「失真」
對大多數人來說，有損外掛程式是最好的選擇。優惠價格非常高 並能依需求自訂壓縮等級 下表列出熱門的 Imagemin 外掛程式。除了上述外掛程式外 但這些最佳做法適用於您的專案
| 圖片格式 | 有損外掛程式 | 無損外掛程式 |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-gif 光亮 | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
映像檔 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);
})();