# 이미지 파일 크기 최적화

## 이미지 최적화 플러그인

ImageMinimizerWebpackPlugin 플러그인은 [imagemin](https://github.com/imagemin/imagemin)을 사용하여 이미지를 최적화합니다. 플러그인을 적용하려면 [image-minimizer-webpack-plugin](https://www.npmjs.com/package/image-minimizer-webpack-plugin) 패키지를 설치합니다.

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i image-minimizer-webpack-plugin -D
```

{% endtab %}
{% endtabs %}

이미지 최적화는 2가지 모드로 제공됩니다. 최상의 결과를 얻을 수있는 옵션을 살펴보고 적절한 모드로 설정합니다.

| 모드                                                             | 설명                 |
| -------------------------------------------------------------- | ------------------ |
| [Lossless](https://en.wikipedia.org/wiki/Lossless_compression) | **무손실** (품질 저하 없음) |
| [Lossy](https://en.wikipedia.org/wiki/Lossy_compression)       | **손실** (품질 저하 있음)  |

### imagemin 플러그인 <a href="#imagemin-plugins" id="imagemin-plugins"></a>

✅ **무손실 최적화를 위해 권장되는 imagemin 플러그인**

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
```

{% endtab %}
{% endtabs %}

✅ **손실 최적화를 위해 권장되는 imagemin 플러그인**

{% tabs %}
{% tab title="패키지 설치" %}

```bash
npm i imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
[imagemin-mozjpeg](https://github.com/imagemin/imagemin-mozjpeg), [imagemin-svgo](https://github.com/imagemin/imagemin-svgo) 플러그인은 무손실 또는 손실 모드로 구성 가능합니다.
{% endhint %}

패키지 및 플러그인을 프로젝트에 설치한 후, Webpack 구성 파일을 열어 플러그인을 설정합니다.

{% tabs %}
{% tab title="webpack.config.js" %}

```javascript
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');

module.exports = {
  // 플러그인 설정
  plugins: [
    // 플러그인 인스턴스 생성
    new ImageMinimizerPlugin({
      // 제외 설정
      exclude: /node_modules/,
      // 최적화 옵션
      minimizerOptions: {
        // 사용자 정의 옵션을 사용해 무손실 최적화합니다.
        // 보다 나은 결과를 위해 여러 옵션을 테스트 하여 사용해봅니다.
        plugins: [
          ['gifsicle', { interlaced: true }],
          ['jpegtran', { progressive: true }],
          ['optipng', { optimizationLevel: 5 }],
          ['svgo', { plugins: [{ removeViewBox: false }] }],
        ],
      },
    }),
  ]
}
```

{% endtab %}
{% endtabs %}

이미지 최적화를 테스트 할 파일을 준비한 후, [번들 명령](https://yamoo9.gitbook.io/webpack/webpack/manage-env-variables#bundle)을 실행하면 파일 크기가 **465KB** 입니다.

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTkPE6EvUYVvQVLT8mn%2F-MTkSRyKbGBB2n4H8pKo%2Fimage.png?alt=media\&token=4158500c-b4d7-44d2-9c83-e60adb1cfc2f)

[빌드 명령](https://yamoo9.gitbook.io/webpack/webpack/manage-env-variables#build)을 실행하여 출력한 결과를 살펴보면, 이미지 파일 크기가 **234KB**로 **약 -50.3% 최적화** 되었습니다.

![](https://1127883942-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MTbexhuB2p5ev8QaGgg%2F-MTkPE6EvUYVvQVLT8mn%2F-MTkSqdkacyqqn4FrKf8%2Fimage.png?alt=media\&token=49794e8a-8f7b-4e5d-8594-cef53a6482c0)

## 참고 <a href="#reference" id="reference"></a>

{% embed url="<https://webpack.js.org/plugins/image-minimizer-webpack-plugin/>" %}