이미지 파일 크기 최적화

이미지 최적화 플러그인

ImageMinimizerWebpackPlugin 플러그인은 imagemin을 사용하여 이미지를 최적화합니다. 플러그인을 적용하려면 image-minimizer-webpack-plugin 패키지를 설치합니다.

패키지 설치

npm i image-minimizer-webpack-plugin -D

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

모드	설명
Lossless	무손실 (품질 저하 없음)
Lossy	손실 (품질 저하 있음)

imagemin 플러그인

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

패키지 설치

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

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

패키지 설치

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

imagemin-mozjpeg, imagemin-svgo 플러그인은 무손실 또는 손실 모드로 구성 가능합니다.

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

webpack.config.js

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 }] }],
        ],
      },
    }),
  ]
}

이미지 최적화를 테스트 할 파일을 준비한 후, 번들 명령을 실행하면 파일 크기가 465KB 입니다.

빌드 명령을 실행하여 출력한 결과를 살펴보면, 이미지 파일 크기가 234KB로 약 -50.3% 최적화 되었습니다.

참고

ImageMinimizerWebpackPlugin | webpackwebpack