渐进式:从模糊变清晰,有利于用户体验,但是低版本IE不支持,会在图片完全加载完之后,突然显示!
基线式:支持所有浏览器,从上到下加载,用户体验一般!
*使用渐进式jpg,在ps中选择“另存为web格式”,在右侧勾选上“连续”!
在fw中,图像选项,勾选上“渐进式增强”!
下表为其在各个浏览器下测试的结果:
浏览器(特定测试版本)渐进jpeg前景渲染渐进jpeg背景渲染
Chrome
渐进地 (相当快!)渐进地 (相当快!)
Firefox (v 15.0.1 Mac, 12.0 Win)渐进地 (相当快!)文件下载后立即地(慢)
Internet Explorer 8文件下载后立即地(慢)文件下载后立即地(慢)
Internet Explorer 9渐进地 (相当快!)文件下载后立即地(慢)
Safari (v 6.0 Desktop, v 6.0 Mobile)文件下载后立即地(慢)文件下载后立即地(慢)
Opera (v 11.60)文件下载后立即地(慢)文件下载后立即地(慢)
结论很简单,Chrome + Firefox + IE9浏览器下,渐进式图片加载更快,而且是快很多,至于其他浏览器,与基本式图片的加载一致,至少不会拖后腿。
渐进式图片其他的补充:
1. 你用永不知道基本式图片内容,除非他完全加载出来;
2. 渐进式图片一开始大小框架就定好,不会像基本式图片一样,由于尺寸未设定而造成回流——提高的渲染性能;
3. 渐进式图片也有不足,就是吃CPU吃内存。
网友评论