画像圧縮、アプリを入れてみてもよかったのですが、せっかくなので無料できる環境構築をしてみました。
下記の記事を参考にしています。
参考 【ほぼ自動化】幸せな画像圧縮〜ローカルでワンクリック！なのに高画質・高圧縮〜qiita.com※基本的には補足のみ記述しているので、メインは上記の記事を参考にしてください。
タップできるもくじ
この記事の著者
CGブロガー
すいみん
Suimin
プロフィール
某美大の油絵科を卒業後、大手CG映像プロダクションに入社。
その後ゲーム業界に転職。
現在は技術系のCGデザイナーをしています。
書籍：Unity デザイナーズ・バイブル
プロフィール詳細はこちら
node.jsをインストール
参考 Node.jsのダウンロードnodejs.org推奨版を入れましょう。
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
まとめ
オンライン圧縮と同等のものを使用しているので、圧縮率も問題ないです。
何かあれば追記します。
