【Mac】無料！ローカルでまとめて画像圧縮する方法［gulp］

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

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

Qiita

【ほぼ自動化】幸せな画像圧縮〜ローカルでワンクリック！なのに高画質・高圧縮〜 - Qiita はじめに Webページの画像は圧縮されていますか？ 画像圧縮をするとしないでは、パフォーマンス面に大きな違いがあります。 Web開発、特にメディア関係のお仕事をされて...

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

node.jsをインストール

Node.js

Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

推奨版を入れましょう。

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

まとめ

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

何かあれば追記します。

あわせて読みたい

【Mac】絶対に入れておくべき！おすすめのアプリまとめ【［汎用］MACに絶対入れておくべきおすすめのアプリ】汎用でこれだけは入れておきべきアプリを紹介します。クリップボードソフト「Clipy」インストール後、上部のステ...

あわせて読みたい

【MacBook】最初にやっておくべき！環境設定全まとめ［初期設定］MacBook ProをメインPCとして使い始めました。Windows歴が長いのですが、同じパフォーマンスができるだけ出せるように設定していきます。【MacBook Pro の型番の調べ方...

あわせて読みたい

【Mac】MacとWindowsのパスを相互に変換する方法[Automator]MAC使い始めて困ったのが、Windowsユーザーとのパスやり取りです。変換サイトが一番確実なのですが右クリックからパスの変換もできるように対応してみました。Windowsの...