Ownedmedia ウェブ制作に役立つコンテンツを発信中!

Gulp 2018.12.27

Gulpでいろんなフォーマットの画像を一括で圧縮する

Tags: ,,
最終更新日:Update

フロントエンドのコーディングには欠かせなくなったタスクランナーのGulpですが、過去にはSassのコンパイルやCSSのミニファイ化などを紹介しましたが、今回は画像ファイルの圧縮をGulpを使って一括で行いたいと思います。

 

Gulpにはコーディングのフローに合わせていろんなタスクを登録しているのですが、私自身この画像圧縮もタスクに登録していて、かなり重宝しています。

 

今回の画像圧縮ですが、PNG、JPG、GIF、SVGと主要な画像フォーマットを全てカバーします。そこで今回は3つのパッケージをインストールする形になります。プロジェクトディレクトリに移動して、下記のコマンドを入力しそれぞれのパッケージをインストールします。

$ npm install --save-dev gulp-imagemin
$ npm install --save-dev imagemin-pngquant
$ npm install --save-dev imagemin-mozjpeg

 

PNG画像の圧縮には「pngquant」というパッケージのプラグインを、JPG画像の圧縮には「mozjpeg」というパッケージのプラグインを、SVGとGIFには「gulp-imagemin」のパッケージに同梱されている「svgo」と「gifsicle」というプラグインを使用します。

 

今回は下記のようなディレクトリ構成で説明しています。minフォルダに圧縮済みの画像が入る形になります。

img
  - sample.jpg
  - sample.png
  - sample.gif
  - sample.svg
  - min
gulpfile.js
node_moodules

 

これまでと同じようにgulpfile.jsに画像圧縮のタスクを記述していきます。PNG、JPG、GIF、SVGと全てのフォーマットが対象になるようにしています。

【gulpfile.js】

gulp.task('imagemin', function () {
  gulp.src('img/*.{jpg,jpeg,png,gif,svg}')
  .pipe(imagemin(
    [
      pngquant({ quality: '65-80', speed: 1 }),
      mozjpeg({ quality: 80 }),
      imagemin.svgo(),
      imagemin.gifsicle()
    ]
  ))
  .pipe(gulp.dest('img/min'));
});

 

上記ではpngquantとmozjpegの実行時に適用されるオプションを指定しています。qualityは圧縮の画質指定になります。speedは圧縮にかかる時間を指定します。軽量化を目指すのであれば上記の内容でとりあえず大丈夫なのではないでしょうか。では実際に上記のタスクをコマンドにて実行してみます。

$ gulp imagemin
[00:00:00] Using gulpfile ~/****/****/gulpfile.js
[00:00:00] Starting 'imagemin'...
[00:00:00] Finished 'imagemin' after 14 ms
[00:00:00] gulp-imagemin: Minified 4 images (saved 211 kB - 58.5%)

 

コマンド一発でわずか数秒で画像が圧縮できました!実際に圧縮後のファイル容量を比較してみますとこんな感じになりました。

JPG:102kb → 25kb
PNG:181kb → 53kb
GIF:68kb → 68kb
SVG:11kb → 4kb

 

ここではGIF画像は容量は変わらなかったのですが、、それ以外のフォーマットについてはかなり軽量化されているのが確認できますね。

 

Gulpのバージョン4系で推奨されている記述方法について

Gulpのバージョンが4系の場合には、gulp.task()が非推奨となっており、関数でタスクを記述する形になりますので、実際には下記のような形になります。

【gulpfile.js】

const { src, dest, watch } = require("gulp"),
 plumber = require('gulp-plumber'),
 rename = require('gulp-rename'),
 imagemin = require('gulp-imagemin'),
 mozjpeg = require('imagemin-mozjpeg'),
 pngquant = require('imagemin-pngquant');

const taskImagemin = () => 
 src('src/images/*')
  .pipe(plumber())
  .pipe(imagemin([
   pngquant({ 
    quality: [ 0.65, 0.8 ], speed: 1 
   }),
   mozjpeg({ 
    quality: 80
   }),
   imagemin.gifsicle({
    interlaced: false
   }),
   imagemin.svgo({
    plugins: [
     { removeViewBox: true },
     { cleanupIDs: false }
    ]
   }),
  ]))
  .pipe(rename(
   { suffix: '_min' }
  ))
  .pipe(dest('dist/assets/img/_min'));

// Wacth
const taskWatch = (done) => {
 watch('src/images/*', taskImagemin);
 done();
}

exports.default = taskWatch;

 


 

いかがでしょうか、近年はモバイル端末の普及により、サイトの高速化が重要になってきています。そんな時には画像の圧縮はかなり効果的ですね。Gulpでタスク登録する場合には、画像がフォルダに入るタイミングなどで自動的に圧縮されるようにしておくと便利です。

この記事を書いた人

オガワ シンヤ

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?