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


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，就算整到程序里，代码也会太多。

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