Web应用中的图片优化技巧及反思

张鑫旭大神的这篇文章，可以帮你更好地了解两者的区别：

渐进式jpeg(progressive jpeg)图片及其相关

简单来说，渐进式图片一开始就决定了大小，而不像Baseline图片一样，不断地从上往下加载，从而造成多次回流，但渐进式图片需要消耗CPU去多次计算渲染，这是其主要缺点。

当然，交错式png也可以实现相应的效果，但目前pngquant没有实现转换功能，但是ps中导出png时是可以设置为交错式的。

在真实项目中如何操作？

实际项目中，总不能UI丢一个图过来你就跑一遍压缩代码吧？幸好imagemin有对应的webpack插件，在webpack遍地使用的今天，我们可以轻松实现在webpack配置文件中，引入自己需要的插件，使用方法完全相同。具体可参考github的文档imagemin-webpack-plugin。

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

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

使用强大的IntersectionObserver

IntersectionObserver提供给我们一项能力：可以用来监听元素是否进入了设备的可视区域之内，这意味着：我们等待图片元素进入可视区域后，再决定是否加载它，毕竟用户没看到图片前，根本不关心它是否已经加载了。

这是Chrome51率先提出和支持的API，而在2019年的今天，各大浏览器对它的支持度已经有所改善(除了IE，全线崩~)：出一个线上demo，供大家调试学习

(ps: 这里额外介绍一个vue的图片懒加载组件vue-view-lazy，也是基于IntersectionObserver实现的)。

还是Chrome的黑科技——loading属性

从新版本Chrome(76)开始，已经默认支持一种新的html属性——loading，它包含三种取值:auto、lazy和eager(ps: 之前有文章说是lazyload属性，后来chrome的工程师已经将其确定为loading属性，原因是lazyload语义不够明确)，我们看看这三种属性有什么不同：

• auto：让浏览器自动决定是否进行懒加载，这其中的机制尚不明确。
• lazy：明确地让浏览器对此图片进行懒加载，即当用户滚动到图片附近时才进行加载，但目前没有具体说明这个“附近”具体是多近。
• eager：让浏览器立刻加载此图片，也不是此篇文章关注的功能。

我们可以通过chrome的开发工具看看这个demo 中的图片加载方式，我们把上一个demo中的js脚本都删掉了，只用了loading=lazy这个属性。接着，勾选工具栏中的Disabled Cache后仔细观察Network一栏，细心的人应该会发现，一张图片被分为了两次

（编辑：江门站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!