@程序员，一文掌握 Web 应用中的图片优化技巧！( 五 )_：@程序员

而相比之下，非渐进式的图片(Baseline JPEG)则会老老实实地从头到尾去加载：

简单来说，渐进式图片一开始就决定了大小，而不像Baseline图片一样，不断地从上往下加载，从而造成多次回流，但渐进式图片需要消耗CPU去多次计算渲染，这是其主要缺点。当然，交错式png也可以实现相应的效果，但目前pngquant没有实现转换功能，但是ps中导出png时是可以设置为交错式的。

在真实项目中如何操作？

实际项目中，总不能UI丢一个图过来你就跑一遍压缩代码吧？幸好imagemin有对应的Webpack插件，在Webpack遍地使用的今天，我们可以轻松实现批量压缩：

npm installimagemin-webpack- plugin

先安装imagemin-webpack-plugin：

importImageminPlugin from'imagemin-webpack-plugin'

importimageminMozjpeg from'imagemin-mozjpeg'

@程序员，一文掌握 Web 应用中的图片优化技巧！( 五 )