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

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

在测试各个浏览器(未说明都为最新版本)时发现:

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

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

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

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

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

测试地址:Interlace_test

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

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

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

05-08 14:55