轩枫阁

首页 / Web前端 / 网页中的图片如何显示从模糊到清晰?

网页中的图片如何显示从模糊到清晰?

不知道大家平时玩转空间、微博等应用的时候,有没有注意到加载图片的时候,图片是有个从模糊到清晰的过程。

图片加载时由模糊到清晰,道理很简单,实现也很容易。对用户体验上的提升也很大。所以现在被广泛采用。之前还以为这个需要用js来实现,但是证明是平时没注意,993回答了这个问题,下面来介绍下:原理很简单,就是大家在ps中保存为web所用格式图片的时候,选择对应的设置就行。

VW{UO01TB2]9P2(`1G5ZT86

U71X5(L2)]BJVW{1@]B0NML

D96@G6Y4OT{I159I{96J5YV

 

demo地址(自己可以试下):http://e.xingdian.com/ldhl40.jpg

可以看到图片是从模糊先出来,再清晰。网速快的人可能没观察出来。如果错过了,可以CTRL+F5来强制刷新。

关于应用点:

一般的装饰图不会用到,而比如文章的大图,相片等较大的图片(一般是JPG格式的),加载时间较长,所以才需要用到模糊到清晰的过程,像一般的小图直接加载完成,所以就没必要用这个。关于图片使用哪种格式较好?点击这里学习

关于性能:

  • 1.jpg格式:文件大小不会有明显的增大,几kb的区别,所以性能没什么影响,推荐此格式的大图使用,有利于用户体验,而不是长时间的面对着空白的区域
  • 2.png格式:文件大小会有明显的提升,不建议使用,一般也用不到这个格式的
338/470
340/470

相关阅读

文章评论

  • 我说为啥有些图片是慢慢加在的?现在终于明白了

    • 用户体验哦

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子