图片格式优化

合适格式，合适尺寸，智能大小，合理的压缩，懒加载，未显示的用低品质的

 

图片格式

 

jpg

有损压缩，色彩保存的比较好

 

缺点：压缩比比较大，纹理型的图不适合jpg压缩，有锯齿

使用场景：色彩型图片

工具:imagemin jpg压缩文件的工具（npm）, 参考：https://github.com/Klathmon/imagemin-webpack-plugin

工具2: imagemin-mozjpeg，

安装依赖：cnpm install imagemin-webpack-plugin --save-dev


//引入：
const ImageminPlugin = require('imagemin-webpack-plugin').default

//在webpack的plugins中：
new ImageminPlugin({ test: /\.(jpe?g)$/i })

//结果：
//362kb-->186kb

安装依赖：cnpm install imagemin-mozjpeg --save-dev

new ImageminPlugin({
    test: /\.(jpe?g|png|gif|svg)$/i,
    plugins: [imageminPngquant(),
      imageminMozjpeg({
        quality: 100,
      })]
  })

//结果：
//362kb-->32.7kb

　　

 

png

色彩和jpg不向上下

纹理型的图片比较适合

缺点：压缩比比较低，体积比较大

使用场景：小图，logo，icon类的

工具：imagemin-pngquant （npm）具体参考：https://www.npmjs.com/package/imagemin-pngquant

安装依赖：cnpm install imagemin-pngquant --save-dev

//引入
const imageminPngquant = require('imagemin-pngquant')

//

在webpack的plugins中（结合imagemin-webpack-plugin一起使用）：

new ImageminPlugin({

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

  plugins: [imageminPngquant()] 
})

结果： 25.6kb-->14.4kb

 

 

 

 

 

webP

兼容性不够好

色彩保存比较好，拥有比较png更大压缩比