이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Grunt에 Imagemin 사용

Katie Hempenius

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 이미지와 일치합니다.

다음 코드 바로 앞에 다음 줄을 추가하여 Imagemin 작업을 로드합니다. grunt.registerTask(...):

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는 압축 품질 수준을 지정하는 플러그인입니다. package.json에 있는 이 프로젝트에 이미 imagemin-pngquant을(를) 추가했습니다. 파일을 압축하는 데 사용할 수 있습니다. 사용하려면 플러그인을 선언하세요. Gruntfile에 압축 품질 수준을 지정하세요.

다음 줄을 페이지의 맨 위에 추가하여 imagemin-pngquant 플러그인을 선언합니다. gruntfile.js:

const pngquant = require('imagemin-pngquant');
const grunt = require('grunt')
grunt.initConfig({
  ...

options 속성을 imagemin 객체. options 속성은 다음과 같습니다.

grunt.initConfig({
  imagemin: {
    options: {
      use: [
        pngquant({quality: [0.5, 0.5]}),
      ]
    },
    dynamic: {
  ...

이 코드는 Imagemin에 Pngquant 플러그인을 사용하여 PNG를 압축하도록 지시합니다. 이 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 플러그인을 사용하여 다음을 수행합니다. 압축하는 것입니다.

다음 줄을 페이지의 맨 위에 추가하여 imagemin-mozjpeg 플러그인을 선언 gruntfile.js입니다.

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']);

Grunt 실행 및 Lighthouse로 결과 확인

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

grunt

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

Minified 6 images (saved 667 kB - 66.5%)

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

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

사이트를 미리 보려면 앱 보기를 누릅니다. 그런 다음 전체 화면 입니다.
Lighthouse 성능 감사 (Lighthouse > 옵션 > 성능)를 다음에서 실행합니다. Glitch의 라이브 버전을 확인하고 이미지" 통과했습니다

'효율적으로 이미지 인코딩' Lighthouse의 감사

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