###### tags: `imagemin` `WebP`
# Imagemin

## MozJPEG (Compress JPG)
[GitHub ](https://github.com/imagemin/imagemin-mozjpeg)

#### Install

npm install imagemin-mozjpeg

#### How to used

//  套件定義
//  在 package.json 內引用的套件
const gulp = require('gulp');
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

// 建構工作
const mozjpeg = async () => {
  await imagemin(['src/img/*.jpg']/*輸入路徑與檔案格式*/, 'build/img'/*輸出目錄*/, {
    use: [
      imageminMozjpeg({
        quality: 50
      })
    ]
  });

  console.log('Images optimized');
};

// 輸出工作
exports.default = gulp.series(mozjpeg);

#### Params Options
| Params | Type | Default | Description |
| :--- | :---: | :--- | :--- | :--- |
| quality | number | | 0 為最差，100 為最好，建議值是高於 70，請依照需求設定。

[壓圖前後比較](https://docs.google.com/presentation/d/1bvGigt5kWGPyArQ6GAqRwYVrIAjedoGG-ghmSWGHH0o/edit#slide=id.g5b1585702d_0_120)

## imagemin-pngquant (Compress PNG)
[GitHub ](https://github.com/imagemin/imagemin-pngquant)

#### Install

npm install imagemin-pngquant

#### How to used

const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

(async () => {
	const files = await imagemin(['images/*.png'], 'build/images', {
		plugins: [
			imageminPngquant({
				quality: [0.6, 0.8]
			})
		]
	});
})();

### Params Options
| Params | Type | Description |
| :--- | :---: | :--- | :--- |
| quality | Array<min: number, max: number> | pngquant使用達到或超過最高質量所需的最少量的顏色。如果轉換結果的質量低於最低質量，圖像將不會被保存。最小值和最大值是範圍0（最差）到1（完美）

# WebP
- Google 推出的圖檔格式，視覺質量和 JPG & PNG相當，但文件更小。
- 目前不能完全取代 JPG & PNG，[因為瀏覽器對WebP支持不普遍](https://caniuse.com/#feat=webp)。

## imagemin-webp (將JPEG和PNG轉成WebP)
[GitHub ](https://www.npmjs.com/package/imagemin-webp)

#### Install

npm install imagemin-webp

#### How to used

const imageminWebp = require('imagemin-webp');

const convertPNGToWebp = () =>
  imagemin([PNGImages], output, {
    use: [
      imageminWebp({
        quality: 85,
      }),
    ]
  });

const convertJPGToWebp = () =>
  imagemin([JPGImages], output, {
    use: [
      imageminWebp({
        quality: 75,
      }),
    ]
  });

optimiseJPEGImages()
  .then(() => optimisePNGImages())
  .then(() => convertPNGToWebp())
  .then(() => convertJPGToWebp())
  .catch(error => console.log(error));
})();

## 在HTML中使用WebP
1. [使用HTML5 的<picture>](http://blog.shihshih.com/how-to-use-html5-picture-element-to-achieve-responsive-image/)是廣泛兼容性的最佳選擇(當瀏覽器不支援WebP)
2. 指定一個 img元素作為<picture>標籤中的預設圖片、當瀏覽器==不支援WebP、<picture>標籤、或是沒有符合的<source>時，則直接顯示img標籤(PNG或JPEG圖像)==。

<!-- before -->
<img src="images/active-2.png" />

<!-- after -->
<picture>
    <source type="image/webp" srcset="build/active-1.webp" />
    <img src="images/active-2.png" />
</picture>


### 參考資料
1. [How Image Optimisation Decreased my Website's Page Weight by 62%](https://freshman.tech/image-optimisation/#compress-jpegs-with-mozjpeg)
2. [Gulp 運行 imagemin-mozjpeg，mozjpeg 批次圖片壓縮](https://mnya.tw/cc/word/1347.html)
3. [前端图片压缩调研](https://github.com/sishenhei7/react-blog/issues/24)
4. [Using WebP images](https://css-tricks.com/using-webp-images/)
5. [使用HTML5 <picture>實現響應式圖片](http://blog.shihshih.com/how-to-use-html5-picture-element-to-achieve-responsive-image/)