画像圧縮、アプリを入れてみてもよかったのですが、せっかくなので無料できる環境構築をしてみました。
目次
ローカルでまとめて画像圧縮する方法
さっそくやり方を解説します。
下記の記事を参考にしています。
※基本的には補足のみ記述しているので、メインは上記の記事を参考にしてください。
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
画像圧縮というフォルダを作成して、必要なデータを格納しました。
ローカルでまとめて画像圧縮する方法まとめ
オンライン圧縮と同等のものを使用しているので、圧縮率も問題ないです。
何かあれば追記します。
