webpack 压缩图片

压缩前：

压缩后：

 压缩后基本上是压缩了70-80%左右

1.依赖版本及配置

  "imagemin-webpack-plugin": "^2.4.2",

  "imagemin-mozjpeg": "^7.0.0",

  "imagemin-pngquant": "^5.0.1",

  "webpack": "^3.6.0", //基于webpack3的项目

  plugins: [

    new ImageminPlugin({

      pngquant: ImageminPngquant({ 

        quality: [0.65, 0.90], // 压缩级别，范围0-1  

        speed: 4, //速度，范围1-11  

      }),

      test: /\.(jpe?g|png|gif|svg)(\?.*)?$/i,

      optipng: {

        optimizationLevel: 7 // 0-7的优化级别  

      },

      gifsicle: {

        interlaced: true, // 是否隔行扫描gif进行模糊效果  

        optimizationLevel: 3 // 0-3的优化级别  

      },

      jpegtran: {

        progressive: true, // 是否无损压缩  

      },

      mozjpeg: {

        quality: 65, // 图片质量，范围0-100  

        progressive: true // 是否启用渐进式编码  

      },

      svgo: {  //不需要可注释     "imagemin-svgo": "^11.0.1",

        plugins: [

          { removeViewBox: false },

          { cleanupIDs: false }

          // 可以添加更多SVGO插件配置  

        ]

      },

      plugins: [

        ImageminMozjpeg({

          quality: 75,

          progressive: true,

        }),

      ],

    }),

 //其他配置

]

 2.不同图片格式优缺点

jpeg/jpg

• jpeg/jpg 压缩比还色彩不错 （web开发都使用这种格式）

• jpeg/jpg的使用场景比较大的图 如轮播

• jpeg/jpg的缺陷 比如logo不适合

png

• png的优点（1.做透明的背景）

• png的使用场景 ：使用比较小的图片如icon等使用如logo等(需要纹理、线条等)

• png 的缺陷（体积比较大，imagemin-pngquant针对png压缩设置60-85%左右）

• imahemin-pngquant 工具压缩

webp

• 可以用工具生成webp的格式，webp压缩出来的体积比png更小

• 兼容性一般只支持80%