【코피페로 바로 사용할 수 있다】 화상 압축 기능

Github은 여기

Github에서 복제한 경우의 단계

node등의 환경 구축이 이미 되어 있으면 아래의 3스텝으로 화상 압축을 할 수 있습니다

1. 복제
(URL이 변경되면 Github에서 복제하십시오)

 git clone https://github.com/RantaroTech/imagemin_gulp.git

2.nodemodule 설치

 git clone https://github.com/RantaroTech/imagemin_gulp.git

3. 실행

gulp img

Node의 환경 등이 준비되어 있지 않은 경우

아래의 1~11의 커맨드를 실행하면 화상의 압축을 곧바로 할 수 있게 됩니다

직접 도입 할 때 gulp과 imagemin을 조사하거나
힘들었기 때문에 코피페만으로 사용할 수 있도록 정리했습니다.

터미널에서 명령을 실행합니다.

1 - nodebrew 설치

nodebrew를 설치하려면 homebrew을 설치하십시오.
(디자이너 등 평소 node를 사용하지 않는 분은 nodebrew 설치로 오류가 될지도)

brew install nodebrew

2 - yarn 설치

brew install yarn

3 - npm init (npm을 사용하기위한 설정)

npm init

4 - src 파일 만들기

mkdir src

5 - dist 파일 만들기

mkdir dist

6 - gulpfile.js 만들기

touch gulpfile.js

7 - gulp 설치

npm install gulp

8 - imagemin 설치

imagemin

npm i gulp-imagemin

9 - imagemin-mozjpeg 설치

imagemin-mozjpeg

npm i imagemin-mozjpeg

10 - imagemin-pngquant 설치

imagemin-pngquant

npm i imagemin-pngquant

여기까지 실행하면 이러한 디렉토리 구조가 되어 있습니다.

├ dist　　　　　　　　　　　　　　　　　　 ・圧縮した画像が置かれる　(ディストリビューションの略)
├ gulpfile.js                        ・gulｐの設定を行う　　　　　　　　　　
├ node_modules                       ・nodeの設定が補完される
├ package-lock.json                  ・nodeのバージョンを表記する
├ package.json                       ・nodeの設定を記述する
└ src                                ・圧縮前の画像を保管する　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

11 - gulpfile.js에 다음을 복사

gulpfile.js

const gulp = require('gulp');
const distDir = 'dist';
const srcDir = 'src';
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const mozjpeg = require('imagemin-mozjpeg');

gulp.task('img', () => {
  return gulp.src(srcDir + '/*.{png,jpg,gif,PNG,JPG,GIF}')
    .pipe(imagemin([
      pngquant('65-80'),
      mozjpeg({
        quality: 80, 
        progressive: true
      }),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(distDir));
});

실행

gulp img

PNG 이미지 압축

압축 전 (37KB)

Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 527 ms

압축 후 (12KB)

jpg 이미지 압축

스마트폰으로 찍은 사진을 압축해 본다.

압축 전 (1.9MB)

Using gulpfile ~/test_gulp/gulpfile.js
Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 571 ms

압축 후 (1.2MB)

요약

이미지 용량을 60% 가까이 줄일 수 있었습니다.
디자이너가 아닌 아마추어 눈이지만 이미지의 열화 등별로 신경이 쓰이지 않았습니다.

・기본적으로 gulpfile.js 를 변경하면 설정을 변경 가능합니다.
・세밀한 압축의 설정등을 변경하고 싶은 경우는 링크의 공식의 옵션을 참고로 해 주세요.

여기까지 읽어 주셔서 감사합니다.

잡담 : iPhoneX의 화질 놀라운