网站优化之图片优化：由模糊逐渐变清晰

相信很多人都注意到QQ空间或者百度空间以及其他某些站，他们的图片打开都会显示的是象马赛克一样不清晰的图片，然后慢慢变清晰。这样做的好处是避免用户长时间等待图片而跳出。

实现这样的效果有三种方式：

一、图片本身。

gif、PNG图片用PS保存的时候，最后一步选择[b]交错[/b]。如图1

jpeg图片使用渐进式，如图2

在fireworks另存为保存的时候 点击 选项  然后选择 渐进式...

 

二、js代码

<img src="ceshi2.jpg" name="pic" width="800" height="600" id="pic" /> <!--缩略图-->
  
   <script type="text/javascript">
   var img = new Image();
   img.src = "ceshi.jpg"; /*最终显示的大图*/
   img.onload = function() {
     document.getElementById('pic').src = this.src;
}

</script>

三、html  lowsrc属性

<img src="ceshi.jpg" lowsrc="ceshi2.jpg"  width="800" height="600" border="0" />

在lowsrc中使用缩略图，浏览器会先加载lowsrc中的图片，缩略图尺寸小，放到正常图片的宽高自然会显示不清晰，待正常图片加载完毕，就会显示大图。

原理上第三种方法是这样，但是我测试了，貌似没有效果。

个人还是推荐第一种，特别是做图片站的朋友，这样优化无疑对seo以及用户体验都是有好处的。因为第二种是js，就算整到程序里，代码也会太多。

学习分享罢了，无技术含量，转载请注明出处，谢谢。