grunt-image で画像最適化を自動化する

あるある

デザイナ(コーダ)「うおー！(^ω^)(すごい勢いでデザイン＆コーディング)」

エンジニア「デザイナからデータを受け取ったよ！そのまま突っ込むよ！えい！(^ω^)」
ユーザ「画像…めっちょおもぃ(^ω^)」

あなたの…心に…直接…呼びかけています… 画像…最適化できてますか…誰がやるか…曖昧に…なっていたりしませんか…

画像最適化とは

画像最適化とは、Webサイトのレスポンス改善を目的に、画像に適切な処理を施すことです。一口に言っても、様々なアプローチがあり、形式を変換したり、画像をまとめたりすると、コードも触る必要があるので大変。今回は効果がわかりやすく、カジュアルに取り入れやすい 画像ファイルサイズを小さくする(品質を保ちながらデータを削ったり、圧縮する) の最適化手法にフォーカスします。

画像最適化ツールといえば、先日、話題になっていた http://compressor.io/ が記憶に新しいですが、以下の理由であんまり使いたくない。自動化したいです。

• GUI でぽちぽち最適化するのはかなりしんどい
• デザイナ(コーダ)がやるのか、エンジニアがやるのか曖昧
• 画像最適化自体を忘れちゃうことがある(だって人間だもの)
• リリース前案件の画像を外に出すのは抵抗がある

CLI だけで完結する grunt-image を使って、自動化

そこで、いい感じのツールを探していて、 grunt-image を見つけました。

• grunt-image
  • https://www.npmjs.org/package/grunt-image

PNG, JPEG, GIF, SVG 画像をCLI完結で最適化してくれる grunt モジュールです。 tasks を覗くと、画像形式に合わせて、 optipng や jpegtran などの画像最適化コマンドをかけていることが確認できます。

インストール・設定

インストールする際には、libjpeg-turbo を入れてから、対象ディレクトリにて npm でインストールしましょう。また、自動化させるには、watch も必要なので、入ってなければ npm install watch とかでインストールしてください。

$ brew install libjpeg libjpeg-turbo
$ npm install --save-dev grunt-image

続いて、 Gruntfile.js の記述。例えば、src 以下への画像追加を watch して、dist に吐き出したい場合はこのように書きます。

module.exports = function (grunt) {
  grunt.initConfig({
    image: {
      static: {
        files: { 
        }
      },
      dynamic: {
        files: [{
          expand: true,
            cwd: 'src/', 
            src: ['**/*.{png,jpg,gif,svg}'],
            dest: 'dist/'
        }]
      }
    },
    watch: {
      images: {
        cwd: 'src/',
        files: ['**/*.{png,jpg,gif,svg}'],
        tasks: ['image']
      },
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-image');
}

動かしてみる

さて、設定が済んだら、grunt watch して、src ディレクトリに画像を投げてみましょう。すると、このとおり。自動的に画像が最適化され、 dist ディレクトリに保存されました。素敵っす。

$ grunt watch
Running "watch" task
Waiting...
>> File "src/sample.jpg" added.
Running "image:static" (image) task

Running "image:dynamic" (image) task
✔ src/sample.jpg -> before=707.76 kB after=336.14 kB reduced=371.61 kB(52.5%)

Done, without errors.

まだ研究の余地がありそう

• compressor.io: 707kB -> 250 kB
• grunt-image: 707kB -> 336 kB

改めて、 compressor.io は、すごいですね。上記で最適化を通したサンプル画像ファイルは、compressor.io のカメレオン画像なのですが、まだ90kB近く開きがある。裏で何を使ってるんだろうなー。要研究です。

いきなり全て完璧にはできませんが、まずはできるところから導入していきたいですね。

参考リンク: grunt-image 作者 @1000ch(id:hc0001) さんの記事

調べてる途中で日本の方と気付いた。良記事です。今月のWEB+DBの記事も執筆されているらしい。読もうー。

画像の最適化をCLIだけで行うgrunt-imageを作った http://1000ch.net/posts/2014/grunt-image.html

WEB+DB PRESS Vol.81

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)