Skip to content

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

Description

@stuxt

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

baseline-jpeg

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

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

progressive-jpeg

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

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

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

这种方式有两种大致的方法:
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

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions