页面体验提高小技巧—渐进式图片

渐进式图片的使用

前端性能方面有许多可优化的点，而这些优化带来的就是用户体验的提高。今天咱们要聊的东西并不能给性能带来提高，但却能在必定程度上提高用户的体验。

参考 博客

    场景：在访问页面的时候若是图片较大或者网速慢的状况咱们会看到图片加载起来是有一个明显过程的，就是从上到下逐行呈现出来，这给用户的信号就是再等等图片还在加载中，而且图片没有加载出来的部分呈现一片空白，不利于体验，下面就看看渐进式图片怎么缓解这一状况

认识渐进式图片

渐进式图片实际上是一种JPEG格式的图片，和普通的JPEG图片的区别以下：

• 普通图片渲染时，数据将按照存储时的顺序从上到下逐行扫描被显示出来的，直到全部的数据都被读取完毕，就完成了整张图片的显示。
• 渐进式图片渲染过程当中，会先显示整个图片的模糊轮廓，随着扫描次数的增长，图片变得愈来愈清晰。这种格式的主要优势是在网络较慢的状况下，能够看到图片的轮廓知道正在加载的图片大概是什么。

口说无凭，看看效果

• 生成两张相同的图片，均为JPEG格式

一、普通图片生成

二、渐进式图片生成（直接ps保存为JPEG格式，勾选连续）

• 部署到服务器查看效果

    效果描述：从上面能够看到，两张图片的大小是差很少的，渐进式图片一开始呈现的效果为好像是一会儿就彻底加载出来了，只是看起来有点模糊。而普通图片是逐行扫描加载，已渲染的部分清晰可见。

• 最终效果

总结

    从直观上来看好像渐进式图片要加载的快一点，这就是渐进式图片可以达到的体验提高效果。