使用渐进式图片提升用户体验 [每天进步一点点系列]

[stuxt]

一般情况下我们访问一个网站都会发现图片的加载会是这个样子的：

这种方式用户感知不是很好，能明显感受到加载的全过程，内容只有等完全加载完成后才能看到完整的内容。

然而有些时候我们也会看到有些网站的图片加载是这个样子的：

不是从顶部开始一点一点的加载，而是从一开始就能就能看到整个图片的大致轮廓，然后慢慢变的清晰。这个相比上面的那种方式用户体验有明显的提升。

那么这种加载方式是如何实现的呢？

其实这种图片的加载方式就是“渐进式图片加载”。

这种方式有两种大致的方法： 1、一种是保存图片的时候就把图片保存为渐进式的图片格式，这样在加载的时候就会使用渐进式的加载方式加载。

我本地测试了一下，效果不是很明显，但是相比较标准的图片加载格式，加载速度有明显的提升。

具体做法，参考：http://www.zhangxinxu.com/wordpress/2013/01/progressive-jpeg-image-and-so-on/

2、模拟渐进式的图片加载方式。

模拟 progressive image （渐进式图片加载），用低分辨率的模糊图片来做预览图，代替以前懒加载图片时用的 logo 占位图。预览图大小也在平均 2KB~3KB 之间，虽然 cdn 流量上有所增加，但用户体验却非常好。

目前知乎和 Medium 都用了 progressive image （渐进式图片加载）这种方式的。

具体做法，参考：https://juejin.im/entry/58d2485c2f301e007e63ed54

渐进式的图片加载方式可以明显提升用户体验，对于图片很多，或者加载大图的时候可以考虑使用，提高用户体验，弱化加载过程。