怎样优化网站图片？

分类：网站技术 | lao8发表于 2008-3-13 11:12:00

通常情况下我们网页设计师都知道，如果网站是用表格布局的话，用户访问我们的网页要等到把整个表格（table）下载下来才会显示出表格里的内容，而用层（div）布局则让用户感觉速度“更快”。

老吧总结了如下的网站（网页）图片优化技巧：

首先网页图片要进行压缩，老吧通常用fireworks进行批量压缩。
网页中的大图片如果不能缩小的话，最好切开来，这样下载的时候就会一块块显示，不至于访问者等太久。
能做背景的就不要直接插在页面里。例如QQ网站通常采用的方式是：大图片切除很多的小块，然后把这些切开的小块图片放在表格里拼合好然后再显示出来。QQ页面最上面的大图片：http://lady.qq.com/zt/2007/xinniang/index.htm

它把每个图片用“<td background="http://www.1314hunsha.com/upimg/20083/200832118582.jpg"></td>”的方式作为表格背景，而不是用<img src="" />方式。
它的代码如下：

<TABLE cellSpacing=0 cellPadding=0 width=910 border=0>
<TBODY>
<TR>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_1.jpg height=88 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_2.jpg height=88 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_3.jpg height=88 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_4.jpg height=88 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_5.jpg height=88 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_6.jpg height=88 alt=""></TD></TR>
<TR>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_7.jpg height=87 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_8.jpg height=87 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_9.jpg height=87 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_10.jpg height=87 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_11.jpg height=87 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_12.jpg height=87 alt=""></TD></TR>
<TR>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_13.jpg height=88 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_14.jpg height=88 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_15.jpg height=88 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_16.jpg height=88 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_17.jpg height=88 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_18.jpg height=88 alt=""></TD></TR>
<TR>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_19.jpg height=87 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_20.jpg height=87 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_21.jpg height=87 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_22.jpg height=87 alt=""></TD>
<TD width=151 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_23.jpg height=87 alt=""></TD>
<TD width=152 background=http://mat1.qq.com/lady/images/sj/2007/09/18/top_24.jpg height=87 alt=""></TD></TR>
</TBODY></TABLE>

老吧通常也用CSS定义背景图片，同样可以使网页先载入页面中最重要的内容，最后下载装饰性的图片，代码如下：

<div style="background:url(/images/XXX.gif) no-repeat;height=图片高;width=图片宽"></div>