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

图6/11

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

在真实项目中如何操作？

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

先安装imagemin-webpack-plugin：

接着在Webpack配置文件中，引入自己需要的插件，使用方法完全相同。具体可参考GitHub的文档imagemin-webpack-plugin。

通过图片按需加载减少请求压力

图片按需加载是个老生常谈的话题，传统做法自然是通过监听页面滚动位置，符合条件了再去进行资源加载，我们看看如今还有什么方法可以做到按需加载。

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