画像圧縮、アプリを入れてみてもよかったのですが、せっかくなので無料できる環境構築をしてみました。
目次
ローカルでまとめて画像圧縮する方法
さっそくやり方を解説します。
下記の記事を参考にしています。
Qiita

【ほぼ自動化】幸せな画像圧縮〜ローカルでワンクリック!なのに高画質・高圧縮〜 – Qiita
はじめに
gulp-imageminの仕様が変わり、エラーが発生します。
解決方法は見つけましたが、記事の体裁を整えるのは後日となりますため、見づらくなっていることをご了承く…
※基本的には補足のみ記述しているので、メインは上記の記事を参考にしてください。
STEP
node.jsをインストール
推奨版を入れましょう。
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
実行スクリプトの作成
下記のコードの内容のスクリプト(imagemin.command)を作成します。
cd work
gulp
終わったら管理者権限を付与
chmod u+x imagemin.command
STEP
最終的なディレクトリについて
user - 画像圧縮 - distImg
- scrImg
- gulpfile.js
- imagemin.command
画像圧縮というフォルダを作成して、必要なデータを格納しました。
ローカルでまとめて画像圧縮する方法まとめ
オンライン圧縮と同等のものを使用しているので、圧縮率も問題ないです。
何かあれば追記します。
あわせて読みたい

【Mac】絶対に入れておくべき!おすすめのアプリまとめ
本記事ではMACに最低限入れておくべきアプリまとめを紹介します! 初めてMACにした時にまずは下記のアプリを入れておきましょう! 【[汎用]MACに絶対入れておくべきお…
あわせて読みたい

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

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