目录
渐进式图片
JPG 里成为渐进式，PNG和GIF中称为交错，加载时立刻有从模糊到清晰的效果。
渐进式特点
- 你用永不知道基本式图片内容，除非他完全加载出来；
- 渐进式图片一开始大小框架就定好，不会像基本式图片一样，由于尺寸未设定而造成回流——提高的渲染性能；
- 渐进式图片也有不足，就是吃CPU吃内存。
图片数据
图片为PS导出web使用格式，选中连续得到渐进式图片，改例子为JGP 格式。
下面数据为为本地浏览器chrome测试，netwokr(slow 3G)，可以看出在加载方面几乎是一致的，毕竟大小差异也很小。
| 类型 |
基线式 |
渐进式 |
| size |
1000*1000 |
1000*1000 |
| Content-Length |
156543 |
156102 |
| Request sent |
0.18 ms |
0.17 ms |
| Waiting (TTFB) |
2.03 s |
2.01 s |
| Content Download |
3.12 s |
3.12 s |
| load time(s) |
5.15 s |
5.14 s |
屏幕加载截图
chrome debug 模式打开 Capture screenshost，获得屏幕加载截图
-
基线式
-
渐进式
- 基线式在5.16秒显示完整图片，也就是整个图片完成加载的时间，而渐进式整个图片显示是在3.42秒，后续的时间在加载图片细节。
- 排除TTFB，基线显示花了3.12秒显示图片，也就是download的时间，而渐进式只用了3.42-2.01=1.41秒就先显示了整个图片。
- 渐进式显示出整张图片的时间比基线模式快了1.74秒，按download时间算，用户感知方面渐进式比基准式快了1.74/3.12=0.557692
渐进式加载细节
放大500倍后看到的效果
- 加载到图片数据，背景从灰色变成带锯齿的模糊图像
- 继续加载数据，图片从带锯齿到细节逐渐清晰
- 后续部分几乎用肉眼无法察觉。可能和图片内容有关
补充 来自wiki
隔行扫描（也称为交错）是一种对位图图像进行编码的方法，以便部分接收它的人看到整个图像的退化副本。当通过慢速通信链路进行通信时，这通常比查看图像某一部分的完全清晰副本更可取，因为它可以帮助查看者更快地决定是中止传输还是继续传输。
以下格式支持隔行扫描，其中它是可选的：
- GIF隔行扫描按 0, 8, 16, …(8n), 4, 12, …(8n+4), 2, 6, 10, 14, …(4n+2) 的顺序存储行, 1, 3, 5, 7, 9, …(2n+1)。
- PNG使用Adam7 算法，该算法在垂直和水平方向交错。
- TGA使用两种可选的隔行扫描算法，两路：0, 2, 4, …(2n), 1, 3, …(2n+1) 和四路：0, 4, 8, … (4n), 1, 5, …(4n+1), 2, 6, …(4n+2), 3, 7, …(4n+3)。
- JPEG、 JPEG 2000和JPEG XR（实际上使用频率分解层次而不是像素值的交错）
- PGF（也使用频率分解）
隔行扫描是增量解码的一种形式，因为图像可以增量加载。另一种增量解码形式是逐行扫描。在逐行扫描中，加载的图像是逐行解码的，因此它不是逐渐变清晰而是逐渐变大。位图和视频中的隔行扫描概念之间的主要区别在于，即使是逐行位图也可以在多个帧上加载。
例如：隔行 GIF 是一种 GIF 图像，它似乎像图像通过缓慢打开的百叶窗到达您的显示器一样。图像的模糊轮廓逐渐被七个连续的比特流波取代，这些比特流填充缺失的线条，直到图像达到其全分辨率。
交错图形曾经是[什么时候？]广泛用于网页设计，在此之前还用于通过公告板系统和其他低速通信方法分发图形文件。这种做法在今天不太常见，因为普通的宽带互联网连接几乎可以立即将大多数图像下载到用户的屏幕上，而隔行扫描通常是一种低效的图像编码方法。[需要引用]
隔行扫描受到了批评，因为当图像完成渲染时，观看者可能不清楚，不像非隔行扫描渲染，进度很明显（剩余数据显示为空白）。[1]此外，由于隔行扫描图像通常也不会压缩，因此必须下载更大的文件可能会抵消隔行扫描对低速连接的好处。[2]
参考文章
渐进式jpeg(progressive jpeg)图片及其相关
浅谈图片加载：逐行扫描VS交错扫描
Introduction to PNG - png和gif交错加载对比