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

一，前言

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

图片格式与设计那点事儿

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

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

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

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

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

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

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

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

正常：RGBRGBRGB(一次显示完)
交错：RRR(第一次显示)GGG(第二次显示)BBB(第三次显示)

因为假期还有许多学习任务，所以图片存储这一部分并没有深入了解，上面的存储方式只是猜测，也算是提供了一个思路，更多信息请自行谷歌（关键词：interlace PNG 或者 progressive JPEG），欢迎回来分享。

三，生成interlace PNG、progressive JPEG

①Photoshop处理

在前端开发中，许多图片都是从美工图片中切下来的，然后在PS上进行简单的处理作为静态资源使用。

其实上面那篇博客就有相关的内容，不过既然自己实践了一下，也为了保证阅读的连续性，还是上一下图片吧。

②rails中使用MiniMagick处理

好，重点来了，怎么用代码来处理图片呢？在图片上传这个环节，涉及到服务器对图片的修改及保存。因为web后台使用了rails，所以图片处理库也就用了MiniMagick:

MiniMagick的安装使用

因为MiniMagick其实是调用了ImageMagick（或者GraphicsMagick,取决于你安装了哪个软件）来进行图片处理，所以我们要先安装ImageMagick。

1，安装ImageMagick

#Mac OS X (本地开发环境)
brew install ImageMagick#ubuntu（产品部署环境）
apt-get install software-properties-common
sudo apt-get update
sudo apt-get install imagemagick libmagickwand-dev

2，在rails中安装MiniMagick
在Gemfile文件中加入下面一行，然后执行bundle命令来安装gem包即可：

# image process
gem 'mini_magick'

3，rails使用MiniMagick来生成交错扫描的图片

image = MiniMagick::Image.open(image_path)
# => format之后就不是交错的模式了,所以要先format再设置交错模式
image.format 'png'
image.interlace "plane" #选择交错模式
image.write image_path

4，enjoy it!
在终端中执行下面命令，检查图片是否是交错扫描的，返回None代表不是交错扫描的，否则是交错扫描。

identify -verbose filename.jpg | grep Interlace

注意：identify命令是安装ImageMagick之后才有的。

ImageMagick是一个很强大的软件处理工具，裁剪、放大缩小、图片加文字这些根本不在话下，有兴趣可以研究一下，日后有空看看图片处理的源码也是蛮有意思的。

四，一些想法

其实4G网络下，一般的web图片（40k）左右，上述两种图片加载方式其实差别不大，而且有一部分人认为，先加载模糊的图片其实用户体验也并不好，所以怎么选择就见仁见智了。

我在最近写的一个作品展示页面（有大量图片）上遇到了图片逐行加载时间比较久（有几秒时间图片只有一截，下面空白等待加载）影响用户体验的问题，因此换成交错扫描的加载方式，起码页面打开会在极短时间内显示模糊图片，当用户认真看的时候，图片早就变清晰了。

其实解决方法还有很多，例如图片我应该处理成缩略图和原图两种，在index页面显示缩略图（因为足够小，所以加载速度足够快，两种图片加载方式没有明显区别），点击进去再显示原图。以后还会涉及到展示页超过一页，设置延时加载图片的问题，以后有实践的话会分享记录一下。

希望自己能尽快拓展知识面（有利于更好地理解学习更多的内容），同时也能挤出时间深入研究某一两个点，逝者如斯夫，加油，在有限的时间内尽可能多做事，多学习才是关键，多花时间最多算努力，虽然努力也很重要。