Gruntを使って画像を最適化

Bookmark this on Google Bookmarks
LINEで送る
Pocket

Google PageSpeed Insightsで画像が最適化できるという提案が出たので、
サイトに使われている画像の容量を小さくする方法を探したところGruntを使うのがシンプルそうだったので試した。
最適化のためにアプリを立ち上げたりせずにGruntで済むのが良さげ。

もっと圧縮率が高い方法もあるようだが、まずは導入が簡単な grunt-contrib-imagemin を使う。

grunt-contrib-imagemin
https://github.com/gruntjs/grunt-contrib-imagemin

サイトに書かれている通りにインストール

npm install grunt-contrib-imagemin --save-dev

Gruntfile.jsに以下を追加

grunt.loadNpmTasks('grunt-contrib-imagemin');

同ディレクトリに
最適化前のファイルを入れるimg_orgフォルダ
最適化後のファイルを入れるimgフォルダ
があるとする

Gruntファイルに以下を記述。

imagemin: {
    dynamic: { 
      files: [{
        expand: true, 
        cwd: './img_org/',
        src: ['**/*.{png,jpg,gif}'], 
        dest: './img/' 
      }]
    }
}
grunt imagemin

を実行すると最適化されたファイルがimgフォルダ内に生成される