gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（オプション・プラグイン編）

2022.05.13

WEB

Webデザイン

以前の記事「Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説」では、「gulp-imagemin」パッケージのv8、v7系をそれぞれインストールして実行するところまで紹介しました。

画像の圧縮は問題なく行えましたが、gulp-imageminのデフォルトの設定では圧縮効率がそこまで良いものではありませんでした。そこで今回はgulp-imageminの7系をベースにオプションやプラグインを活用して圧縮効率の改善を行っていきます。

前回の記事同様、gulpを利用するにはNode.jsの実行環境が必要です。実行環境の導入については下記の記事を参照してください。

INDEX

gulp-imageminのインストール
プリセットオプションを指定して確認
プラグインをインストールして圧縮
さいごに

gulp-imageminのインストール

gulp-imageminのv7系を利用していきますので、バージョンを指定してコマンドを実行します。

npm init -y
npm install --save-dev gulp gulp-imagemin@7

gulp-imageminのバージョンの違い、タスクの記述方法の違いに関しては前回の記事で説明していますのでそちらを参照してください。

gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編）

gulpタスクはGitHubでも紹介されている下記のものをベースに各種パラメータを確認していきます。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

exports.default = () => (
	gulp.src('src/images/*')
        .pipe(imagemin())
		.pipe(gulp.dest('dist/images'))
);

圧縮に利用する画像については「gif」「jpg」「png」「svg」をそれぞれ1つずつ用意しました。

ファイル名		ファイルサイズ
sample.gif		380KB
sample.jpg		208KB
sample.png		963KB
sample.svg	※png形式に変換しています	17KB

プリセットオプションを指定して確認

gulp-imageminではデフォルトで画像圧縮のためのプラグインが利用できるように用意されています。

Comes bundled with the following lossless optimizers:

gifsicle — Compress GIF images
mozjpeg — Compress JPEG images
optipng — Compress PNG images
svgo — Compress SVG images

sindresorhus / gulp-imagemin

それぞれの拡張子ごとにプラグインを指定することができ、各プラグインにオプションパラメータを渡すことで圧縮に関する指定を調整することができます。

プラグインの指定は4種類をセットで渡す必要があり、省略した際には圧縮が行われなくなりますので、デフォルトのパラメータと同じ形式で必ず4種類を指定するようにします。

// jpgだけパラメータを指定したい場合
imagemin([
    imagemin.gifsicle(),
    imagemin.mozjpeg({quality: 75, progressive: true}),
    imagemin.optipng(),
    imagemin.svgo()
])

それではデフォルトで用意されているプラグインにパラメータを指定してどの程度圧縮されるかを確認してみます。
各種パラメータの指定はこちらもGitHubのサンプルをお借りしました。指定できるパラメータの種類に関しては各プラグインのページを参照ください。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

exports.default = () => (
	gulp.src('src/images/*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 75, progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
		.pipe(gulp.dest('dist/images'))
);

パラメータを指定したタスクを実行すると

ファイル名	ファイルサイズ ※（）内は圧縮前のサイズ
sample.gif	394KB（380KB）
sample.jpg	96KB（208KB）
sample.png	700KB（963KB）
sample.svg	13KB（17KB）

上記のような結果になりました。GIF画像に関してはなぜか圧縮前よりファイルサイズが増えてしまいましたが、その他のファイルに関しては平均して30%程度の圧縮に成功しました。SVG画像はもともとファイルサイズが小さいので変化がわかりにくいですが、JPG画像に関しては50%以上の圧縮率となっています。

このままでも良いのですが、比較的利用頻度が高くファイルサイズも大きくなりがちなPNG画像に関してはもう少し圧縮をかけたいところですので、別途プラグインをインストールしてさらに圧縮率を高めてみようと思います。

プラグインをインストールして圧縮

プラグインは様々なものが配布されていますが今回は「imagemin-pngquant」というPNG画像用のプラグインを利用します。
magemin-pngquant

下記のコマンドよりプラグインをインストールします。

npm install --save-dev imagemin-pngquant

インストールが完了したらタスクを修正します。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

// プラグインの読み込みを追加
const imageminPngquant = require('imagemin-pngquant');

exports.default = () => (
	gulp.src('src/images/*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.mozjpeg({quality: 75, progressive: true}),
            // プラグインの指定、パラメータを変更
            imageminPngquant({
                quality: [.50, .60],
                speed: 1,
            }),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ]))
		.pipe(gulp.dest('dist/images'))
);

修正したタスクを再度実行すると

ファイル名	ファイルサイズ ※（）内は圧縮前のサイズ
sample.gif	394KB（380KB）
sample.jpg	96KB（208KB）
sample.png	194KB（963KB）
sample.svg	13KB（17KB）

PNG画像に関しては、963KBだったファイルが194KBまで削減、約80%の圧縮率となりました。ここまで軽量化できれば満足ですね。

さいごに

gulp-imageminのオプション・プラグインについて説明いたしました。

初期設定にやや手間はかかりますが、一度設定してしまえばあとはタスクを実行するだけで簡単に画像の圧縮処理を行えるようになりますので、手動で行っている方の参考になれば幸いです。

この記事を書いた人

なかもとソリューション事業部マークアップエンジニア: 企画・営業部を経て、システムエンジニア、マークアップエンジニアとしてweb サイト制作、webアプリケーション開発の上流から下流まで幅広く携わる。ユーザビリティ、アクセシビリティを意識したセマンティックなマークアップとより良いユーザー体験を追及して日々奔走中。三度の飯よりwebが好き。