以前、鹿野さんが書いた下記の記事をベースに作ったものを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