WonderCSS

如何让图片在网页加载中以渐进方式显示出来

对于每一位网页浏览者对于图片的加载都是在熟悉不过了,但或许你会发现加载一些较大图片,有的是从上到下如卷轴一样显示出来,有的是先显示出模糊的全尺寸,然后再逐渐清晰。是什么造成这种图片加载模式的差别呢?答案很简单图片格式。

再此说图片格式的差别并不是 JPEG 和 GIF 或 PNG 的区别,而是 JPEG 格式本身下载方式的不同 JPEG 和 JPEGs 的差别。

从用户体验的角度上说 JPEGs 这种多线路径下载方式会让浏览者感到“更快”的体验,虽然这个过程并没有更快。如果是一张“超大”图片,很多浏览者会没有耐心去等待自上而下的显示方式,以至于将页面关掉。但如果是先模糊再渐变到清晰,这个过程更亲和用户体验,甚至会让这个过程显得有趣。

如何保存 JPEGs / JPGs 格式的图片呢?

在 PhotoShop 保存图片时选择“存储为Web所用格式(Alt+Shift+Ctrl+S)”,图片格式选择JPEG,勾选上“连续(以多条路径下载)”复选框后保存即可。

By 于湛 发布于 2013.04.17 2,803 次浏览

如何让图片在网页加载中以渐进方式显示出来》上有1条评论

  1. huakang

    图片加载的效果差异我还以为是浏览器渲染方式不同造成的呢

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注