浅谈图片加载：逐行扫描VS交错扫描

一，前言

最近在不断地扩充自己web开发的知识面，看得比较泛，难得五一假期就在学习之余实践一下，毕竟纸上得来终觉浅，况且“纸上”的不一定都对，之前看了一篇博客讲图片加载的，博主大概是淘宝前端团队的吧，讲得很透彻，分享一下：

图片格式与设计那点事儿

虽然是10年的文章了，但是鉴于图片格式近几年并没有大的改动，而且博主讲得比较透彻，所以很有参考价值。

本篇博客只是对上面博客的验证以及在rails上的实践，推荐阅读上面那篇博客。

二，图片加载中的扫描方式

在带宽有限的时候显示大图片始终是个问题，特别在移动设备上，长加载时间导致了长白屏时间，用户体验不好。

如果细心观察各类网页上图片的加载，你会发现有从上到下（逐行扫描）的加载和先加载模糊的照片再逐渐变清晰（交错扫描）两种方式（网速不好时特别明显）。

可见，为了效果明显，特地选了一张2M左右的照片，同样图片，同样大小（其实为了实验的可靠性，第二张特意调得大一些，多个20k吧），第二种方式的加载看似更快，先交错加载出图片轮廓，再慢慢填充细节，GIF动图可能不是太明显，大家可以自己去试一下。

上面两张图片都是JPG格式的，只是有个属性（interlace【译：交错】）不同，造成了两种图片编码格式，对应两种浏览器的图片解码方式，也就会产生上面的两种视觉效果。

关于两种扫描方式的底层的不同大家可以去看JPG或者PNG的编码方式，这里有个图片供参考，注意红框部分。标准模式下，存储时时将图片从左上角到右下角的像素点存下来，每个像素点有RGB三个值，以一行有三个像素点为例：