Grunt에 Imagemin 사용

케이티 헴페니우스
Katie Hempenius
X

Imagemin Grunt 플러그인 설정

이 글리치에는 이미 grunt, grunt-cli, grunt-contrib-imagemin 플러그인이 포함되어 있습니다. Imagemin 구성을 추가하려면 gruntfile.js 파일을 수정해야 합니다.

  • 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  • gruntfile.js에서 //Add configuration here 주석을 다음 코드 블록으로 바꿉니다.
imagemin: {
  dynamic: {
    files: [{
      cwd: 'images/',
      expand: true,
      src: ['**/*.{png,jpg}'],
    }]
  }
}

이 코드 블록은 Grunt에 Imagemin으로 압축해야 하는 파일을 알려줍니다.

  • dynamic는 파일 이름을 지정된 파일 패턴과 일치시켜 압축할 파일 목록이 동적으로 생성된다는 것을 나타냅니다.

  • {cwd: 'images/', expand: true, src: ['**/*.{png,jpg}']} 파일 패턴은 images/ 디렉터리의 모든 JPEG 및 PNG 이미지와 일치합니다.

  • grunt.registerTask(...) 바로 앞에 다음 줄을 추가하여 Imagemin 작업을 로드합니다.
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', [/* list plugins here */]);
  • 마지막으로 /* list plugins here */ 주석을 'imagemin'로 바꿔 Imagemin을 기본 Grunt 작업으로 추가합니다. 이제 줄이 다음과 같이 표시됩니다.
grunt.registerTask('default', ['imagemin']);

✔︎ 체크인

이제 전체 gruntfile.js 파일이 다음과 같이 표시됩니다.

const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    dynamic: {
      files: [{
        cwd: 'images/'
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Imagemin 구성 맞춤설정

imagemin-pngquant는 압축 품질 수준을 지정하는 플러그인입니다. PNG 파일을 압축하는 데 사용할 수 있도록 이미 package.json 파일에서 이 프로젝트에 imagemin-pngquant를 추가했습니다. 사용하려면 플러그인을 선언하고 Gruntfile에서 압축 품질 수준을 지정합니다.

  • 다음 줄을 gruntfile.js 상단에 추가하여 imagemin-pngquant 플러그인을 선언합니다.
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...
  • imagemin 객체에 options 속성을 추가하여 PNG 이미지를 압축하는 설정을 추가합니다. options 속성은 다음과 같이 표시됩니다.
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

이 코드는 Pngquant 플러그인을 사용하여 PNG를 압축하도록 Imagemin에 지시합니다. quality 필드는 값의 min 및 max 범위를 사용하여 압축 수준을 결정합니다. 즉, 0이 최저이고 1이 가장 높습니다. 모든 이미지를 50% 품질로 강제 압축하려면 최솟값과 최댓값 모두로 0.5를 전달합니다.

✔︎ 체크인

이제 gruntfile.js 파일이 다음과 같이 표시됩니다.

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

하지만 JPEG는 어떨까요? 프로젝트에는 JPEG 이미지도 있으므로 압축 방법도 지정해야 합니다.

Imagemin 구성 맞춤설정 (계속)

이미 설치된 imagemin-mozjpeg 플러그인을 사용하여 JPEG 이미지를 압축합니다.

  • 다음 줄을 gruntfile.js의 상단에 배치하여 imagemin-mozjpeg 플러그인을 선언합니다.
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
  • 다음으로 options 객체의 배열에 mozjpeg({quality: 50})를 추가합니다. 이제 배열은 다음과 같이 표시됩니다.
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {

✔︎ 체크인

이제 gruntfile.js 파일이 다음과 같이 표시됩니다.

const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const grunt = require('grunt');
grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
        mozjpeg({quality: 50})
      ]
    },
    dynamic: {
      files: [{
        cwd: 'images/',
        expand: true,
        src: ['**/*.{png,jpg}'],
      }]
    }
  }
});
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.registerTask('default', ['imagemin']);

Lighthouse로 Grunt 실행 및 결과 확인

  1. 도구 버튼을 클릭합니다.
  2. 그런 다음 콘솔 버튼을 클릭합니다.
  3. 콘솔에 다음 명령어를 입력하여 Grunt를 실행합니다.
grunt

Grunt가 완료되면 콘솔에 다음과 같은 메시지가 표시됩니다.

Minified 6 images (saved 667 kB - 66.5%)

축하합니다. 이러한 결과가 훨씬 더 좋습니다.

마지막으로 Lighthouse를 사용하여 방금 변경한 내용을 확인하는 것이 좋습니다. Lighthouse의 '효율적인 이미지 인코딩' 성능 감사를 통해 페이지의 JPEG 이미지가 최적으로 압축되었는지 확인할 수 있습니다.

  • 사이트를 미리 보려면 View App을 누른 다음 Fullscreen 전체 화면을 누릅니다.
  • Glitch의 실시간 버전에서 Lighthouse 성능 감사 (Lighthouse > 옵션 > 성능)를 실행하고 '이미지를 효율적으로 인코딩' 감사를 통과했는지 확인합니다.

Lighthouse에서 '효율적인 이미지 인코딩' 감사 통과

완료되었습니다. Imagemin을 사용하여 페이지의 이미지를 최적으로 압축했습니다.