Gulp와 함께 Imagemin 사용

케이티 헴페니우스
Katie Hempenius
X

Imagemin Gulp 플러그인 설정

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

  • 리믹스하여 수정을 클릭하여 프로젝트를 수정할 수 있도록 합니다.
  • 먼저 gulpfile.js 상단에 다음 코드를 추가하여 gulp-imagemin 플러그인을 초기화합니다.
const imagemin = require('gulp-imagemin');
  • 그런 다음 gulpfile.js의 //Add tasks here 주석을 다음 코드 블록으로 바꿉니다.
gulp.src('images/*')
  .pipe(imagemin())
  .pipe(gulp.dest('images/'))

이 코드는 Imagemin을 사용하여 images/ 디렉터리의 이미지를 압축하는 Gulp 작업을 추가합니다. 원본 이미지를 덮어쓰고 동일한 images/ 디렉터리에 저장합니다.

✔︎ 체크인

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

const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('images/'))
});

이제 이미지를 압축하는 데 사용할 수 있는 gulpfile.js가 생겼습니다.

Gulp 실행

  1. 도구 버튼을 클릭합니다.
  2. 그런 다음 콘솔 버튼을 클릭합니다.
  3. 콘솔에 다음 명령어를 입력하여 Gulp를 실행하여 이미지를 압축합니다.
gulp

Gulp가 완료되면 터미널에 다음과 같은 메시지가 표시됩니다.

gulp-imagemin: Minified 6 images (saved 50 kB—14.8%)

처음에는 파일 크기를 15% 늘리는 것이 좋지만 다른 압축 설정을 사용하면 더 많은 개선을 이룰 수 있습니다.

Imagemin 구성 맞춤설정

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

  • 다음 줄을 gulpfile.js 상단에 추가하여 imagemin-pngquant 플러그인을 선언합니다.
const pngquant = require('imagemin-pngquant');
  • 다음 배열을 ImageminPlugin()에 전달하여 imagemin-pngquant 플러그인과 설정을 추가합니다.
[pngquant({quality: [0.5, 0.5]})]

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

✔︎ 체크인

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

const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]})
    ]))
    .pipe(gulp.dest('images/'))
});

하지만 JPG는 어떨까요? 프로젝트에 JPG 이미지도 포함되어 있으므로 이 이미지도 압축해야 합니다.

Imagemin 구성 맞춤설정 (계속)

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

  • 다음 줄을 gulpfile.js의 상단에 배치하여 imagemin-mozjpeg 플러그인을 선언합니다.
const mozjpeg = require('imagemin-mozjpeg');
  • 다음으로, ImageminPlugin()에 전달된 배열에 mozjpeg({quality: 50})를 추가합니다.
[
  pngquant({quality: [0.5, 0.5]}),
  mozjpeg({quality: 50})
]

✔︎ 체크인

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

const mozjpeg = require('imagemin-mozjpeg')
const pngquant = require('imagemin-pngquant');
const imagemin = require('gulp-imagemin');
const gulp = require('gulp');

gulp.task('default', () => {
  gulp.src('images/*')
    .pipe(imagemin([
      pngquant({quality: [0.5, 0.5]}),
      mozjpeg({quality: 50})
    ]))
    .pipe(gulp.dest('images/'))
});

Gulp를 다시 실행하고 Lighthouse로 결과 확인하기

  • Gulp를 다시 실행합니다.
gulp

Gulp가 완료되면 터미널에 다음과 같은 메시지가 표시됩니다.

gulp-imagemin: Minified 6 images (saved 667 kB—66.5%)

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

마지막으로 Lighthouse를 사용하여 방금 변경한 내용을 확인하는 것이 좋습니다.

Lighthouse의 '효율적인 이미지 인코딩' 성능 감사를 통해 페이지의 JPEG 이미지가 최적으로 압축되었는지 확인할 수 있습니다.

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

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

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