Google PageSpeed Insightsで画像が最適化できるという提案が出たので、
サイトに使われている画像の容量を小さくする方法を探したところGruntを使うのがシンプルそうだったので試した。
最適化のためにアプリを立ち上げたりせずにGruntで済むのが良さげ。
もっと圧縮率が高い方法もあるようだが、まずは導入が簡単な grunt-contrib-imagemin を使う。
grunt-contrib-imagemin
https://github.com/gruntjs/grunt-contrib-imagemin
サイトに書かれている通りにインストール
[JavaScript]
npm install grunt-contrib-imagemin –save-dev
[/JavaScript]
Gruntfile.jsに以下を追加
[JavaScript]
grunt.loadNpmTasks(‘grunt-contrib-imagemin’);
[/JavaScript]
同ディレクトリに
最適化前のファイルを入れるimg_orgフォルダ
最適化後のファイルを入れるimgフォルダ
があるとする
Gruntファイルに以下を記述。
[JavaScript]
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: ‘./img_org/’,
src: [‘**/*.{png,jpg,gif}’],
dest: ‘./img/’
}]
}
}
[/JavaScript]
[JavaScript]
grunt imagemin
[/JavaScript]
を実行すると最適化されたファイルがimgフォルダ内に生成される