0%

你可能不了解的图片加载方式

[大图预警,流量慎入!] 我们在浏览页面、获取信息时,细心的你可能会留意到,不同网页的图片可能有不同的加载表现。那么究竟是由什么决定图片的加载方式的呢? 然后不由的陷入了沉思(.jpg),接着来了解一下关于图片加载的小知识吧、

加载方式

目前所知的图片加载方式主要有两种: 一种是线性加载,而另一种则是渐进式加载

线性加载其实就是在我们浏览网页时常看见的那种 —— 网速足够慢或者图片尺寸过大时,可以看到图片的加载方式由上至下,一点一点的加载。比如我们随便去一个壁纸库点开一个壁纸,就很明显的看到这种加载方式:

渐进式 则如同名字一般, 它会先显示低分辨率的近似图像,再逐步的增加图片分辨率(模糊到清晰)。这里容笔者卖个关子,不上示例图。

实现原理

那么到底是什么决定了图片的加载方式呢? 事实上,加载方式在作图的时候就已经被定下来了。

photoshop 中,我们按下快捷键ctrl + shift + alt + s(弹出储存为 Web 所用格式),再选择 jpeg 格式后可以看到下面有一个连续的选项(悬浮提示以多条路径下载),这个选项调用的是离散小波变换算法(该算法也作为 JPEG2000 的內部架构),选项默认是不勾选的。而默认的 线性加载 则是 离散余弦变化算法

浏览器在加载页面的时候,会读取图片的压缩算法,再根据不同的压缩算法来选择相应的渲染算法。

实际效果

接着来动手试试实际效果吧: 笔者准备了两张相同内容但不同加载方式的 jpg 格式的图片,并且起了一个本地服务器。将控制台打开,设置一个较差的网速来对比两张图片的加载情况.

what? 似乎跟想象中的有所出入? 仔细一瞧,图一虽然先是从上至下的加载, 但同时它的清晰度也跟着变化。而图二则没有这种的效果。

由于图片尺寸的问题,使对比的效果不够明显,接着笔者再准备了两张 png 格式的图片( photoshoppng 格式需要勾选的选项变成是交错),然后再次进行试验:

更换的 demo 图片后,可以很直观的看到 —— 渐进式图片前期会有一个结构的构建过程,但很快就完成了基础框架的渲染,我们从 Network 上还可以看到,虽然图一最先渲染出了样子但此时并不是并不是最完整的图片。

安静的等待渲染完毕后,你可能会惊讶的发现: 什么? 图一竟然比图二还加载的时间还长一点?

是的,得益于渐进式逐步加载的算法,人们在视觉上会感觉渐进式相比线性加载更快一些,这是一种视觉的效果。虽然实际加载的时间可能还会长点,但从用户体验的确不一样了.

然而并非所有浏览器都支持渐进式加载, 翻阅了一下资料, 发现早期张鑫旭 dalao 也写过类似的内容, 也可以参考一看: 渐进式 jpeg(progressive jpeg)图片及其相关

JavaScript 的渐进式

前文介绍渐进式的时候卖了个关子,没上示例图是为啥呢?

这是因为此物非彼物, 我们常看到的渐进式加载可能不是由图片本身算法的效果, 为了避免混淆才暂时不上。文章看到这里,有过开发经验的朋友就会明白,从实际出发若真有这种需求,我们总不能祈祷全部用户上传图片都是渐进式的吧,这也够不现实。

google 图片就是使用 javascript 来实现图片的渐进式加载。我们来分析一下它实现方式:

在点击查看大图的时,它会预先加载一个缩略图,同时图片底部有一条 loading 的效果,等加载完毕后就显示清晰的图片且将 loading 隐藏起来。笔者在控制台研究一下没有找到实现的源码。知道的朋友也不妨留言交流一下~

知乎也有使用渐进式加载图片,已经有知友分析过了,实现方式跟我上一篇文章讲的东西思路也有相似之处,只不过是针对方向不同~

有兴趣的可以移步知友的回答: 新版知乎加载图片时从模糊到清晰的这个效果是如何做出来的? - Tw93 的回答

「请笔者喝杯奶茶鼓励一下」

欢迎关注我的其它发布渠道