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%

相关推荐
八月ouc1 天前
每日小知识点:10.14 webpack 有几种文件指纹
前端·webpack
街尾杂货店&1 天前
webpack - 单独打包指定JS文件(因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改)
前端·javascript·webpack
jiangzhihao05152 天前
前端自动翻译插件webpack-auto-i18n-plugin的使用
前端·webpack·node.js
_孤傲_3 天前
webpack实现常用plugin
前端·webpack·node.js
Jonathan Star4 天前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
细节控菜鸡4 天前
Webpack 核心知识点详解:proxy、热更新、Loader与Plugin全解析
前端·webpack·node.js
dcloud_jibinbin5 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
颜酱6 天前
理解 Webpack 的构建过程(实现原理),并实现一个 mini 版
前端·javascript·webpack
teeeeeeemo7 天前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
小小前端_我自坚强8 天前
2025Webpack、Vite、Rollup详解
webpack·vite·rollup.js