以前、鹿野さんが書いた下記の記事をベースに作ったものをPNG,JPEGの両方に対応するように作り直してみたメモ。
5分で導入! タスクランナーGulpでWeb制作を効率化しよう – ICS MEDIA
全体的な解説は鹿野さんの記事に詳しいので、ここでは変更点のみ記します。
・PNGの圧縮は、imagemin-pngquan を使う方がいいらしいので、こっちを追加。以下のコマンドで該当フォルダにインストール。
npm install --save-dev imagemin-pngquan
・JPEGの圧縮は、imagemin-mozjpeg を使うため追加。以下のコマンドで該当フォルダにインストール。
npm install --save-dev imagemin-mozjpeg
※ちなみに「–save-dev」はinstallしたlibraryの情報を自動でpackage.jsonに書いてくれるオプションです。
npmでnode.jsのpackageを管理する – Qiita
・複数の拡張子を指定するには、{} で囲めばいいらしい(gulpfile.js 11行目)。
・PNG,JPEG共に圧縮設定を追加(gulpfile.js 12-25行目)。
これらを書き足したコードが以下です。
・gulpfile.js(全文)
// gulpプラグインの読みこみ
var gulp = require('gulp');
// 画像を圧縮するプラグインの読み込み
var imagemin = require("gulp-imagemin");
var pngquant = require('imagemin-pngquant');
var mozjpeg = require('imagemin-mozjpeg');
// imagesフォルダのpng,jpg画像を圧縮して、minified_imageフォルダに保存する
gulp.task("imageMinTask", function() { // 「imageMinTask」という名前のタスクを登録
gulp.src("images/*.{png,jpg}") // imagesフォルダ以下のpng,jpg画像を取得
.pipe(imagemin([
pngquant({
quality: '65-80',
speed: 1,
floyd:0
}),
mozjpeg({
quality:85,
progressive: true
}),
imagemin.svgo(),
imagemin.optipng(),
imagemin.gifsicle()
]
)) // 画像の圧縮処理
.pipe(gulp.dest("minified_image/")); //保存
});
実際に圧縮してみた結果は、こんな感じでした。
・PNG
(圧縮前)2534 × 3490 ピクセル 2.9 MB(2,854,228 バイト)
(圧縮後)2534 × 3490 ピクセル 1.6 MB(1,555,755 バイト)> 約55%に圧縮
・JPEG
(圧縮前)3024 × 4032 ピクセル 6.3 MB(6,335,114 バイト)
(圧縮後)3024 × 4032 ピクセル 1 MB(1,032,033 バイト)> 約16%に圧縮
【参考】
Gulpでpngquantを使ってPNGの減色&軽量化 – Qiita
gulp-imageminのプラグインによる最適化が機能しない際の対処 – Qiita