個人的 imagemin 設定方法 ver.2018

お気持ち

フロントエンドにおける画像圧縮と言えば、 imagemin 一択である。
しかし、どの画像圧縮エンジンを使うのかとか、どの設定項目を使うのかとか、毎回悩みがちである。
そこで、個人的な設定をまとめておくことにした。

特徴

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

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

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

• 開発環境では disable が true になるよう設定するべき
• 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
    })
  ]
}

以上。