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

2021 5/03

2019.10.06 2021.05.03

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

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

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

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

Qiita

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

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

STEP

node.jsをインストール

推奨版を入れましょう。

Node.js

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

STEP

gulpをインストール

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

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

STEP

atomのインストール

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

STEP

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

gulp-imagemin
imagemin-mozjpeg
imagemin-pngquant
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