エンジニア

【コピペですぐできる】node.jsを使った画像の容量圧縮

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

ここまで実行するとこのようなディレクトリ構造になっています。

スクリーンショット 2019-02-09 17.35.34.png


├ dist              ・圧縮した画像が置かれる (ディストリビューションの略)
├ gulpfile.js          ・gulpの設定を行う
├ 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の画質すごい

ABOUT ME
らんたろう
24歳/Webエンジニア/
趣味:写真/野球/バスケ/旅行/

九州の工業高校を卒業後上京。
一部上場の大手電機メーカーに就職。
22歳の時未経験からエンジニアにジョブチェンジ。

エンジニアとしてSES企業やゲーム系上場企業などを経験

同じ若い世代の方や同じような境遇の方に向けての
情報発信を目的としたブログです。