メニュー

【Mac】無料!ローカルでまとめて画像圧縮する方法[gulp]

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

目次

ローカルでまとめて画像圧縮する方法

さっそくやり方を解説します。

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

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

STEP

node.jsをインストール

STEP

gulpをインストール

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

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

STEP

atomのインストール

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

STEP

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

  1. gulp-imagemin
  2. imagemin-mozjpeg
  3. imagemin-pngquant
  4. gulp-changed(画像の圧縮前・圧縮後の差分をチェック)
STEP

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/")); //保存
});
STEP

実行スクリプトの作成

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

cd work
gulp

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

chmod u+x imagemin.command

STEP

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

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

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

ローカルでまとめて画像圧縮する方法まとめ

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

何かあれば追記します。

この記事も読まれてます

目次
閉じる