体验JPEG图片渐进模式

前几天看了一个高手朋友的文章后才知道，原来JPEG文件有两种保存方式，分别是Baseline JPEG（标准型）和Progressive JPEG（渐进式）

两种格式唯一的区别是二者显示的方式不同

标准型

存储方式：从上到下扫描，把每一行顺序的保存在JPEG文件中

显示方式：数据将按照存储时的顺序从上到下一行一行的被显示出来，如果文件较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果

渐进式

存储方式：进行多次扫描，每次扫描的精度逐渐提高，把多次扫描结果顺序保存在JPEG文件中

显示方式：先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰

优势和不足

优势

渐进式图片一开始大小框架就定好，不会像基本式图片一样，由于尺寸未设定而造成页面重排，所以渐进式图片提高了页面渲染性能

并且由于开始就能让用户看到图片的轮廓，也提高了用户体验

不足

相比基本式图片 更占用CPU和内存

实际测试

（1）准备图片

找了一张1.1M的图片，放入一个测试页面，把图片外面加一层div，如

<div style="border:2px solid red">

添加边框是为了看加载图片时的区域大小

（2）把图片转为渐进式

我的服务器上已经安装了imagemagick，用它就可以转换格式

转换命令

convert 原图.JPG -interlace Plane 新图.JPG

转换后图片的大小只相差了几K，可以忽略了

（3）浏览测试页面

在测试页面的 img 标签中分别使用原图和新图，查看浏览效果

结果：

可能由于加载速度比较快，没有看出图片显示方式的不同，但可以看出初始加载方式的不同

使用原图，初始时img外层div是合在一起的，没有展开，说明图片没加载出来时不知道图片的尺寸

使用新图，初始时img外层div是安装图片大小展开的，说明没加载完成时就知道图片的尺寸了