【追記あり】Gulpを利用して画像をロスレス圧縮する

画像を圧縮する必要があり、Gulpを使えば画像が一括圧縮できると聞き、Gulpの導入から圧縮までを行いました。

画像圧縮には、PNG、JPEG、GIG、SVG画像を圧縮してくれるgulp-imageminプラグインを利用しました。
結果としては、png画像はうまく圧縮できたのですが、なぜかjpg画像はできませんでした。次回の課題です。←こちら解決し、追記に記述しました。

Gulpと画像圧縮プラグインの導入まで

・node.jsが入っているか確認

node -v

入っていない場合はnode.jsをインストールしてください。
その時、サイトなどでダウンロードしたインストーラーを利用するのではなく、node.jsをバージョン管理するためのtoolであるnodebrewでインストールした方が後々便利です。

・npmが入ってるか確認

npm -v

・グローバルにGulpをインストール

npm install --global gulp-cli

次からは作業ディレクトリを作成して、作成したディレクトリ配下でコマンドを叩きます。

・パッケージ管理のためのファイルであるpacakge.json作成

npm init --yes

・ローカルにGulpをインストール(グローバルとローカルのどちらにもGulpをインストールする必要があります。)

npm install --save-dev gulp

・画像圧縮に利用するgulp-imageminをインストール

npm install --save-dev gulp-imagemin

・Gulpとgulp-imageminがインストールされたか確認。２つが表示されていたら問題ないです。

npm ls --depth=0

画像圧縮タスクを作成

作業ディレクトリ配下にgulpfile.jsファイルを作成します。 今回は以下のコードを記述しました。

var gulp = require('gulp');
var imagemin = require("gulp-imagemin");

gulp.task('imagemin', function(){
    gulp.src("images/*.jpg")
        .pipe(imagemin())
        .pipe(gulp.dest("jpegtran_images"));
    gulp.src("images/*.png")
        .pipe(imagemin())
        .pipe(gulp.dest("optipng_images"));
});

作業ディレクトリ配下に、圧縮したい画像を入れるimagesディレクトリを作成します。
.pipeは前の出力結果を受け継ぎ処理を実行しています。
gulp.destは指定場所に結果を出力しています。
圧縮した画像の出力先である、jpegtran_imagesとoptipng_imagesディレクトリは出力時に自動で作成されます。

タスク実行と結果

今回、テストとしてjpgとpngの画像を1枚ずつを圧縮しました。

・タスク実行

% gulp imagemin
[22:48:45] Using gulpfile ~/workspace/gulp_test/gulpfile.js
[22:48:45] Starting 'imagemin'...
[22:48:45] Finished 'imagemin' after 19 ms
[22:48:45] gulp-imagemin: Minified 1 image (saved 45 B - 0%) //jpg画像
[22:48:49] gulp-imagemin: Minified 1 image (saved 66.3 kB - 58.1%) //png画像

この結果から分かる通り、jpg画像は45Bしか圧縮できず、正常に動作していないような気がします。 一方、png画像に関してはサイズを半分ちかく減らせていて、見た目も特に変化ないです。

以下、テストで利用したpng画像の圧縮前後の比較です。
見た目も全く変わらず、どちらも可愛いGopher君ですね。

・圧縮前(114KBのデブなGopher君)

・圧縮後(48KBのスリムになったGopher君)

まとめ

Gulpを利用すれば、簡単に画像圧縮ができました。
ただ、jpg画像が上手く圧縮できなかったので、jpgに関しては別の方法を考える必要があるかもしれません。

png画像に関しては更に圧縮できるimagemin-pngquantがあるので、次やるときに利用してみたいと思います。

【追記】

---

gulp-imageminライブラリ内でjpeg画像圧縮で利用されているimagemin-jpegtranライブラリのprogressiveオプションをつけたら、 jpg画像も正常に圧縮できた。

以下のように追記した。

    gulp.src("images/*.jpg")
        .pipe(imagemin({
            progressive: true
        }))
        .pipe(gulp.dest("jpegtran_images"));

ライブラリのサイトにprogressiveオプションの意味が書いてあるが、 実際に付けるとどうなるかが分かっていない。前進?

・圧縮前(273KBのたけのこ)

・圧縮後(264KBのたけのこ)