Benjamin:优化图像让网页趋向完美

当我们打开一个网页时，会发现一个简单的图像下载的时间相当于若干页下载的时间。当我们浏览网页，不经意间就会发现大块的下载时间来自于图像文件。今天就给大家分享一种如何用改进图像让网页趋向完美，同时增强用户体验。

网页访问者的耐心往往是有限的，就拿我自己来说，面对一个久久不能打开的网页视图，我的习惯性动作就是“跳出”。可能这个网页的图像很酷，但是如果她们对于快速下载来说太丰满，很少有人会坚持到最后以求一睹她们的尊容。因此，提高用户体验也是SEO优化的一个技巧。幸运的是，网页设计者可以使用一些技巧和优化来加速图像和页面的下载，同时提高对搜索引擎的友好。

某位名人曾经说过，人都喜欢讲废话，不管你是有意识还是无意识，人一生要讲70%的废话，剩下的30%才是有价值的或者是我们表达的目的。很有趣的是人们愿意用70%来服务这30%。图像优化可不吃这一套，我们在页面中要尽量把多余的图像去掉，这里“多余”可不是指公司的标志，是指那个精明的、在“发邮件”旁边的动画信封。如果在页面底部还放着随处可见的NetscapeNavigator和Internet Explorer按钮，说实话，有多少人没听说过这些产品呢？

在网站中减少一个琐碎的10KB的图形文件可能对整个网站改进不大。但是如果你的整个页面才40KB，减少10KB就可以减少25%的下载时间。另外，在图片格式选择上，开始时，确定一个图像用GIF格式还是JPEG格式。这看起来很
基本，但是还有一大部分网页犯这样的错误。

GIF用在看起来干脆整洁的小图形上是很完美的，但是不会超过256色。GIF也可存为“透明色” – 允许图形有不规则的边界。简单的公司标志、小按钮和导航条是应用GIF图形格式的很好的例子。不象JPEG，GIF是一种无损失的压缩格式，所以我们的图形不会变得模糊不清。如果我们在扫描有详细细节的地图，应该选择GIF格式。不过，如果图片很大，GIF文件会很大，下载时间也会很长。虽然我们不能从根本上压缩GIF文件，但是可以减少位深，即限制颜色数。

当我们使用图形编辑器时，保证图形尺寸（72dpi）与将要在网页上显示的相同。在HTML中，用<IMAGE>标记的WIDTH和HEIGHT属性重述图像的实际尺寸。这可以使浏览器在图像下载时同时呈现页面的其余部分，并且保证在“关闭图像”浏览时可以看到正确的页面布局。

如果在页面中使用表格，图像尺寸非常重要：因为没有定义尺寸的图像会迫使浏览器清除和重绘页面。这种情况发生在当浏览器按照<TABLE>和<TD>来建造表格，然后却发现表格单元中的图像没有尺寸参数却太大而不能放在表格中时。浏览器只得重绘表格来容纳如此笨拙的图像。效率低下的页面重绘浪费时
间，而且用户看到不断消失和重绘的页面时也会不高兴。

使用WIDTH和HEIGHT时，最重要的是不要用它们调整页面图形的大小或形状。通过HTML调整大小是很差劲的，有两个原因。如果我们放大图像，就会得到一幅有锯齿的图片。如下所示：

锯齿图形

用HTML使图像变小不是一直很坏，但在表现上很差。因为浏览器下载的数据比实际要显示的图像多，于是增加了下载时间。

制定规则的目的就是违反它。这里也有一个可以违反规则的例子。如果我们浏览HotWired和Webmonkey很长时间了，你就会看到以下的图形：

放大后没有锯齿

这种情况下，两个图片是同一个GIF文件，所以它们的下载时间相同。放大后没有锯齿是因为图像本身没有任何曲线或斜线。如果我们的标记或设计全是直角，可以用一个非常小的GIF文件，然后在HTML中放大 – 别忘了保持合适的比例。

这样的处理就会使得图片kb值小了很多，搜索引擎可以快速的读取到他。另外，在处理后的图片中加入文本描述可以让蜘蛛人明白图片是什么，在插入文章中是用来干什么的，这样做的目的也是为了实现提高对搜索引擎的友好。