超簡単！imageminで画像圧縮のタスクを作ってみる【拡張子全部乗せ2018】

Shinya Okazawa

2018.08.04

こんにちは、フロントエンドエンジニアのザワです。
この夏、いい思い出はつくれていますか？そうでもない？でも、嫌な思い出は全部圧縮しちゃえばいいじゃない！ということで、今回はフロントエンドのパフォーマンスを考える上で避けては通れない、画像圧縮のタスクを作ってみたいと思います。

「作る」と言っても、公開されているnpmパッケージを組み合わせて画像圧縮タスクを作っていくかたちになります。出来合いの惣菜を組み合わせて、簡単にお弁当を作るイメージですね。記述量も短く、すぐにできてしまうためにちょっと不安になりますが（これで本当にうまく動いているのかな、ってね）、惣菜だってレンジでチンするだけで美味しく食べれるんだから、理屈としては充分でしょう。

ちなみに「画像圧縮しよう」と心に決めた場合、npm scriptsだったり、ツールを使ったり、など選択肢はたくさんあります。

我が社が誇るスーパーフルスタックエンジニアのハルさんも画像圧縮について執筆していますので、あわせてぜひお読みください。

コマンドでjpg画像を圧縮！ guetzliの便利な使い方

ハル

2018.06.23

コマンドでpng画像を圧縮！ pngquantの便利な使い方

ハル

2018.05.26

やってみよう！

それでは、早速はじめてみましょう。
※前提として、Node.jsは既にマシンにインストール済みです。また、Node.jsはv8.11.3。npmは5.6.0のバージョンにて動作確認済み。

ディレクトリ構成

今回のディレクトリ構成はこちらです。
今後のコマンドは、imageminディレクトリ直下で行います。

imagemin/
  dest/
  src/
    sample.jpg
    sample.png
    sample.gif
    sample.svg
  index.js
  package.json
  package-lock.json

package.jsonとpackage-lock.jsonはこの後 npm init コマンドを実行して作成します。それ以外のファイルは自分で作成しておいてください。

簡単に処理の流れを説明すると、srcディレクトリに圧縮したい画像をぶちこんで、コマンドラインからコマンドを打つ。すると圧縮を通して洗練された画像たちがdestディレクトリに勢揃い……といった風なことをやります。

package.jsonを作成

npm init を実行。対話式にいろいろ聞かれますが、Enterボタン連打で大丈夫です。連打が面倒な人は npm init -y と-y オプションを渡すと対話に全部「yes」で答えたことになります。

npmパッケージをインストール

画像圧縮に必要なnpmパッケージをインストールします。画像圧縮タスクの本体であるimageminと、今回は拡張子全部乗せを実現したいので、jpg、png、gif、svgそれぞれのimageminプラグインをインストールします。

npm install -D imagemin imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo

npm scriptsを記述

package.jsonのscriptsに、コマンドラインで打つコマンドを設定しましょう。

"scripts": {
  "imagemin": "node index.js"
}

これで、npm run imagemin とコマンドを打てばindex.jsが実行される手筈が整いました。

圧縮処理本体を書く

次に処理本体である画像圧縮タスクをindex.jsに書きます。

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
const imageminPngquant = require('imagemin-pngquant');
const imageminGifsicle = require('imagemin-gifsicle');
const imageminSvgo = require('imagemin-svgo');
imagemin(['src/*.{jpg,png,gif,svg}'], 'dest', {
  plugins: [
    imageminMozjpeg({ quality: 80 }),
    imageminPngquant({ quality: '65-80' }),
    imageminGifsicle(),
    imageminSvgo()
  ]
}).then(() => {
  console.log('Images optimized');
});

簡単に説明すると、imagemin関数の第一引数に圧縮対象のファイルを指定します。今回は、srcディレクトリ直下のjpg、png、gif、svg拡張子に一致するすべてのファイルをワイルドカードで指定しています。

第二引数には圧縮したファイルをどこに格納するかを指定します。destディレクトリを指定していますね。

そして、第三引数にはオプションをオブジェクトで渡します。pluginsオプションではrequireした各拡張子のプラグインを実行。必要であればその引数にオプションを渡します。imageminMozjpeg、imageminPngquant関数にはオプションとして圧縮品質の設定をしています。品質を下げすぎると画像が劣化したり、品質を高いままにすると、サイズがそんなに削れなかったりするので、いい塩梅をお探しください。

各パッケージのオプションや詳しい設定については、npmパッケージのページを読んでみてください。いろいろな設定があって世界が広がりますよ。

imagemin
imagemin-mozjpeg
imagemin-pngquant
imagemin-gifsicle
imagemin-svgo