【mac】無料かつローカルで複数画像を圧縮する方法[gulp]

画像圧縮、アプリを入れてみてもよかったのですが、せっかくなので無料できる環境構築をしてみました。

下記の記事を参考にしています。

参考 【ほぼ自動化】幸せな画像圧縮〜ローカルでワンクリック!なのに高画質・高圧縮〜qiita.com

※基本的には補足のみ記述しているので、メインは上記の記事を参考にしてください。

node.jsをインストール

参考 Node.jsのダウンロードnodejs.org

推奨版を入れましょう。

gulpをインストール

エラーが出たらnpmのデフォルトディレクトリの権限を変更しましょう

sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

atomのインストール

コードを記述する時に使います。

画像圧縮ライブラリをインストール

  • gulp-imagemin
  • imagemin-mozjpeg
  • imagemin-pngquant
  • gulp-changed(画像の圧縮前・圧縮後の差分をチェック)

gulpfile.jsの作成

Atomで下記のコードをコピペします。
※オリジナルのquality: "70-85", // 画質はエラーがでてるので変更しています。

const gulp = require("gulp");

// 画像を圧縮するプラグインの読み込み
const imagemin = require("gulp-imagemin");
const mozjpeg = require("imagemin-mozjpeg");
const pngquant = require("imagemin-pngquant");
const changed = require("gulp-changed");

// srcImgフォルダのjpg,png画像を圧縮して、distImgフォルダに保存する
gulp.task("default", function() {
  return gulp
    .src("./srcImg/*.{png,jpg}") // srcImgフォルダ以下のpng,jpg画像を取得する
    .pipe(changed("distImg")) // srcImg と distImg を比較して異なるものだけ圧縮する
    .pipe(
      imagemin([
        pngquant({
          quality: [ 0.75, 0.85 ], // 画質
          speed: 1 // スピード
        }),
        mozjpeg({
          quality: 85, // 画質
          progressive: true
        })
      ])
    )
    .pipe(gulp.dest("./distImg/")); //保存
});

実行スクリプトの作成

下記のコードの内容のスクリプト(imagemin.command)を作成します。

cd work
gulp

終わったら管理者権限を付与

chmod u+x imagemin.command

最終的なディレクトリについて

画像圧縮というフォルダを作成して、必要なデータを格納しました。

user - 画像圧縮 - distImg
               - scrImg
               - gulpfile.js
               - imagemin.command

まとめ

オンライン圧縮と同等のものを使用しているので、圧縮率も問題ないです。

何かあれば追記します。