グローバルナビゲーションへ

本文へ

フッターへ

お役立ち情報Blog



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

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

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

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

gulp-imageminのインストール

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

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

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

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

圧縮に利用する画像については「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:

sindresorhus / gulp-imagemin

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

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

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

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

ファイル名 ファイルサイズ
※()内は圧縮前のサイズ
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

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

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

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

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

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

さいごに

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

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

The following two tabs change content below.

なかもと

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

FOLLOW US

最新の情報をお届けします