[大图预警，流量慎入！] 我们在浏览页面、获取信息时，细心的你可能会留意到，不同网页的图片可能有不同的加载表现。那么究竟是由什么决定图片的加载方式的呢? 然后不由的陷入了沉思(.jpg)，接着来了解一下关于图片加载的小知识吧、
加载方式
目前所知的图片加载方式主要有两种: 一种是线性加载，而另一种则是渐进式加载。
线性加载其实就是在我们浏览网页时常看见的那种 —— 网速足够慢或者图片尺寸过大时，可以看到图片的加载方式由上至下，一点一点的加载。比如我们随便去一个壁纸库点开一个壁纸，就很明显的看到这种加载方式:
渐进式 则如同名字一般, 它会先显示低分辨率的近似图像，再逐步的增加图片分辨率(模糊到清晰)。这里容笔者卖个关子，不上示例图。
实现原理
那么到底是什么决定了图片的加载方式呢? 事实上，加载方式在作图的时候就已经被定下来了。
在 photoshop 中，我们按下快捷键ctrl + shift + alt + s（弹出储存为 Web 所用格式），再选择 jpeg 格式后可以看到下面有一个连续的选项(悬浮提示以多条路径下载)，这个选项调用的是离散小波变换算法(该算法也作为 JPEG2000 的內部架构)，选项默认是不勾选的。而默认的 线性加载 则是 离散余弦变化算法。
浏览器在加载页面的时候，会读取图片的压缩算法，再根据不同的压缩算法来选择相应的渲染算法。
实际效果
接着来动手试试实际效果吧: 笔者准备了两张相同内容但不同加载方式的 jpg 格式的图片，并且起了一个本地服务器。将控制台打开，设置一个较差的网速来对比两张图片的加载情况.
what? 似乎跟想象中的有所出入? 仔细一瞧，图一虽然先是从上至下的加载, 但同时它的清晰度也跟着变化。而图二则没有这种的效果。
由于图片尺寸的问题，使对比的效果不够明显，接着笔者再准备了两张 png 格式的图片( photoshop 上 png 格式需要勾选的选项变成是交错)，然后再次进行试验:
更换的 demo 图片后，可以很直观的看到 —— 渐进式图片前期会有一个结构的构建过程，但很快就完成了基础框架的渲染，我们从 Network 上还可以看到，虽然图一最先渲染出了样子但此时并不是并不是最完整的图片。
安静的等待渲染完毕后，你可能会惊讶的发现: 什么? 图一竟然比图二还加载的时间还长一点?
是的，得益于渐进式逐步加载的算法，人们在视觉上会感觉渐进式相比线性加载更快一些，这是一种视觉的效果。虽然实际加载的时间可能还会长点，但从用户体验的确不一样了.
然而并非所有浏览器都支持渐进式加载, 翻阅了一下资料, 发现早期张鑫旭 dalao 也写过类似的内容, 也可以参考一看: 渐进式 jpeg(progressive jpeg)图片及其相关
JavaScript 的渐进式
前文介绍渐进式的时候卖了个关子，没上示例图是为啥呢?
这是因为此物非彼物, 我们常看到的渐进式加载可能不是由图片本身算法的效果, 为了避免混淆才暂时不上。文章看到这里，有过开发经验的朋友就会明白，从实际出发若真有这种需求，我们总不能祈祷全部用户上传图片都是渐进式的吧，这也够不现实。
google 图片就是使用 javascript 来实现图片的渐进式加载。我们来分析一下它实现方式：
在点击查看大图的时，它会预先加载一个缩略图，同时图片底部有一条 loading 的效果，等加载完毕后就显示清晰的图片且将 loading 隐藏起来。笔者在控制台研究一下没有找到实现的源码。知道的朋友也不妨留言交流一下~
知乎也有使用渐进式加载图片，已经有知友分析过了，实现方式跟我上一篇文章讲的东西思路也有相似之处，只不过是针对方向不同~
有兴趣的可以移步知友的回答: 新版知乎加载图片时从模糊到清晰的这个效果是如何做出来的？ - Tw93 的回答
