前几天看了一个高手朋友的文章后才知道,原来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是安装图片大小展开的,说明没加载完成时就知道图片的尺寸了