Posted at

個人的 imagemin 設定方法 ver.2018


お気持ち

フロントエンドにおける画像圧縮と言えば、 imagemin 一択である。

しかし、どの画像圧縮エンジンを使うのかとか、どの設定項目を使うのかとか、毎回悩みがちである。

そこで、個人的な設定をまとめておくことにした。


特徴

デフォルトと違う点は、以下の通り。


  • jpegtran を mozjpeg に変えていること

  • optipng を pngquant に変えていること

注意事項は、以下の通り。


  • 開発環境では disabletrue になるよう設定するべき


  • quality は実際の画質を見ながら調節するべき


設定

$ npm i imagemin-mozjpeg --save-dev


settings.js

const imageminMozjpeg = require('imagemin-mozjpeg')

module.exports = {
disable: false,
jpegtran: {
enabled: false
},
optipng: {
enabled: false
},
pngquant: {
quality: '50-70',
speed: 1,
floyd: 0
},
gifscale: {
interlaced: false
},
svgo: {
plugins: [{ removeViewBox: false }]
},
plugins: [
imageminMozjpeg({
progressive: true,
quality: 70
})
]
}


以上。