JPG渐进 & PNG/PNG24 交错测试

今天由同事说起，PS导出PNG时，有个选项”交错“是干啥的，想起这也是个问题，所以特意搞了个测试页面：

引用网上”交错-就是类似旧式电视的隔行扫描，让图片只花50%的时间就可以看到图片全貌“，
另外JPG的”渐进“也有类似效果，可惜支持的浏览器不多

在测试各个浏览器（未说明都为最新版本）时发现：

1. Chrome对“渐进”和“交错”都支持良好

2. Safari(PC/MAC)对“渐进”不支持，“交错支持良好”

3. Fiefox对“渐进”和“交错”都支持良好

4. Opera对“渐进”和“交错”都支持良好

5. IE9对“渐进”和“交错”都不支持

测试地址：Interlace_test

从测试的加载情况可以很容易看出，在对于需要加载大图片的情况下，在导出图片时选择“交错”（PS里JPG选择“连续”），对于用户体验上有很大的改善

另外，在<img />标签有个lowsrc属性，可以指定图片的缩略图，用于避免，页面打开时一片空白；不过现在这个属性出现的概率貌似有点低；

引用某处关于“渐进”(Interlace)和“交错”(Progressive)的解释：

JPEG、GIF和PNG这三种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。