이미지 파일 크기 최적화

PreviousCSS 미디어쿼리 스플리팅 NextReact App 매뉴얼 구성

Last updated 4 years ago

Was this helpful?

이미지 파일 크기 최적화

이미지 최적화 플러그인

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

npm i image-minimizer-webpack-plugin -D

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

모드

설명

무손실 (품질 저하 없음)

손실 (품질 저하 있음)

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

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

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

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

참고