【非エンジニアでもコピペですぐに使える】画像の圧縮機能

9920 ワード
JavaScript gulp pngquant Node.js imagemin JavaScript テキストリンク

【コピペですぐに使える】画像圧縮機能

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)

まとめ

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

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

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

雑談：iPhoneXの画質すごい