gulpで画像のロスレス圧縮を自動化する

  • 公開日:

この記事の目次

パフォーマンス改善に不可欠な画像最適化

Googleが提供している「PageSpeed Insights」を使うと、サイトのパフォーマンスを分析できます。「PageSpeed Insights」に分析したいサイトのURLを入れると、以下のようなメッセージが出る場合があります。

画像に適切なフォーマットと圧縮を選ぶことで、データサイズを大きく削減できます。

Googleのサイトでは、画像を最適化する方法として画像圧縮ツールの使用が推奨されており、具体的に以下のロスレス圧縮のツールが紹介されています。

  • JPEGの場合
    • jpegtran、jpegoptim
  • PNGの場合
    • OptiPNG、PNGOUT

これらのツールをそのまま使ってもいいのですが、作業を効率化するためにgulpを使って画像のロスレス圧縮をおこないます。

gulpを使った画像圧縮の自動化

gulpについて知りたい方には、前回の記事「これから始める人のためのgulp入門」が参考になると思います。

1. npmでパッケージをインストールする

npmで、imagemin-jpegtranimagemin-optipngをインストールします。

$ npm install --save-dev imagemin-jpegtran
$ npm install --save-dev imagemin-optipng

2. タスクを定義する

JPEG画像をjpegtran、PNG画像をoptipngで圧縮するタスクをgulpfile.jsに記述します。

var gulp = require('gulp');
var jpegtran = require('imagemin-jpegtran');
var optipng = require('imagemin-optipng');

gulp.task('imagemin', function(){
    gulp.src('original_images/*.jpg')
        .pipe(jpegtran()())
        .pipe(gulp.dest('optimized_images'));
    gulp.src('original_images/*.png')
        .pipe(optipng()())
        .pipe(gulp.dest('optimized_images'));
});

3. タスクを実行する

定義したタスクを実行して、画像のロスレス圧縮をおこないます。

$ gulp imagemin

実行結果

241KBのJPEG画像は、230KBに圧縮されました。

JPEG画像の圧縮の例

31KBのPNG画像は、11KBに圧縮されました。

PNG画像の圧縮の例

JPEG画像もPNG画像もファイルサイズが小さくなりました。ロスレス圧縮なので、画質の劣化がないところもいいですね。