1~11のコマンドを実行すると画像の圧縮がすぐに行えるようになります

自分で導入する際にgulpやimageminを調べたりして
大変だったのでコピペだけで使えるようにまとめました。
ターミナルでコマンドを実行してください。

1 – 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公式

npm i gulp-imagemin

9 – imagemin-mozjpegをインストール

imagemin-mozjpegのnpm公式
npm i imagemin-mozjpeg

10 – imagemin-pngquantをインストール

imagemin-pngquantのnpm公式

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}')
　　.pipe(imagemin([
　　pngquant('65-80'),// 配列を渡すと文字列を渡すようにエラーが出たので画質のみを設定
　　mozjpeg({
　　　quality: 85,
　　　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)

まとめ

画像容量を6割近く削減することができました。
デザイナーではない素人目ですが画像の劣化などあまり気になりませんでした。

・基本的に `gulpfile.js` を変更すれば設定を変更可能です。
・細かい圧縮の設定などを変更したい場合はリンクの公式のオプションを参考にしてみてください。

ここまでお読みいただきありがとうございました。

雑談：iPhoneXの画質すごい