Edited at

【コピペですぐに使える】画像圧縮機能


【コピペですぐに使える】画像圧縮機能


Githubはこちら

https://github.com/RantaroTech/imagemin_gulp


下記の1~11のコマンドを実行すると画像の圧縮がすぐに行えるようになります

自分で導入する際にgulpやimageminを調べたりして

大変だったのでコピペだけで使えるようにまとめました。

ターミナルでコマンドを実行してください。


1 - nodebrewをインストール

brew install nodebrew


2 - yarnをインストール

brew install yarn


3 - npm init (npmを使うための設定)

npm init


4 - srcファイルを作成

mkdir src


5 - distファイルを作成

mkdir dist


6 - gulpfile.jsを作成

touch gulpfile.js


7 - gulpをインストール

npm install gulp


8 - imageminをインストール

imagemin

npm i gulp-imagemin


9 - imagemin-mozjpegをインストール

imagemin-mozjpeg

npm i imagemin-mozjpeg


10 - imagemin-pngquantをインストール

imagemin-pngquant

npm i imagemin-pngquant


ここまで実行するとこのようなディレクトリ構造になっています。

スクリーンショット 2019-02-09 17.35.34.png

├ dist                   ・圧縮した画像が置かれる (ディストリビューションの略)

├ gulpfile.js ・gulpの設定を行う          
├ node_modules ・nodeの設定が補完される
├ package-lock.json ・nodeのバージョンを表記する
├ package.json ・nodeの設定を記述する
└ src ・圧縮前の画像を保管する                                              


11 - gulpfile.jsに下記をコピぺする


gulpfile.js

const gulp = require('gulp');

const distDir = 'dist';
const srcDir = 'src';
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const mozjpeg = require('imagemin-mozjpeg');

gulp.task('img', () => {
return gulp.src(srcDir + '/*.{png,jpg,gif}')
.pipe(imagemin([
pngquant('65-80'),// 配列を渡すと文字列を渡すようにエラーが出たので画質のみを設定
mozjpeg({
quality: 85,
progressive: true
}),
imagemin.svgo(),
imagemin.optipng(),
imagemin.gifsicle()
]))
.pipe(gulp.dest(distDir));
});



実行

gulp img


png画像を圧縮


圧縮前 (37KB)

test.png

Using gulpfile ~/test_gulp/gulpfile.js

Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 527 ms


圧縮後 (12KB)

test.png


jpg画像を圧縮

スマホで撮った写真を圧縮してみる。


圧縮前 (1.9MB)

test.jpg

Using gulpfile ~/test_gulp/gulpfile.js

Starting 'img'...
gulp-imagemin: Minified 1 image (saved 25 kB - 67%)
Finished 'img' after 571 ms


圧縮後 (1.2MB)

test.jpg


まとめ

画像容量を6割近く削減することができました。

デザイナーではない素人目ですが画像の劣化などあまり気になりませんでした。

・基本的に gulpfile.js を変更すれば設定を変更可能です。

・細かい圧縮の設定などを変更したい場合はリンクの公式のオプションを参考にしてみてください。

ここまでお読みいただきありがとうございました。

雑談:iPhoneXの画質すごい