众所周知,图片是网页中表现主题与内容的重要表现元素,对于用户来说,网站漂亮不漂亮,是否赏心悦目最大的看点还是在图片。既然如此重要,要去除它就不太现实了。深圳学文培训黄老师建议:应该怎么对它进行设置,以达到搜索引擎的要求,让用户看着赏心悦目的同时也让搜索引擎能看懂图片表达的含义。

首先,我们要了解到:人类能看懂图片是因为人类的眼睛与思想可以感受到图片所表达的内容也含义。而搜索引擎在派蜘蛛抓取网页的时候,发现一个img标签才会看到这里有一张图片,这时候它能看懂的就是〈img alt="" src="" /〉这样一个标签,而不能很明确的看到图片的颜色、表达的内容等相关信息。所以,我们应该做以下的优化措施:

在网页中插入图片的XHTML标记是 img ,具体的语法为:〈img alt="这里写图片的说明信息" width="200" height="200" src="1.jpg" /〉 。

一、给图片加上 ALT 属性

ALT属性简单理解为对图片进行文字性的说明,在IE浏览器中,只要指定了ALT属性值,当鼠标移上去时就会出现图片说明。在搜索引擎在收录网页时也会看到ALT属性,并且会将ALT属性作为图片表达内容的参考。在W3C标准中,也明确要求必须要为所有图片加上 ALT属性,以便于不可显示图片的浏览器也能看懂图片表达的内容。

二、图片的格式尽量采用GIF、JPG、PNG

有三种常见的网页图片格式分别是:.gif .jpg .png ,每一种图片格式都有其独有特点,.gif这种图片格式主要应用于兼容IE6的透明图片格式;.jpg图片是目前互联网上主流的应用图片;.png是一种优秀的图片格式,质量非常高。但遗憾的是默认情况下IE6无法显示其透明特性,由于质量很高,所以占用硬盘空间也较JPG图片大一些。

三、图片尺寸不宜太大、太多

图片太大会导航网页打开速度变慢,而且迟迟不能加载完成,导致用户在未打开网站的情况下就已经离开了。所以图片的使用与网站的用户体验要取得平衡或两全其美。如果网站要表现很多小图标或小图片,建议可以使用CSS精灵的模式来表现,把许多的小图片整合到一个图片中,再通过背景定位将其导出,这样可以有效降低图片请求数据,加快网页打开速度。

四、插入图片时必须要指定图片的宽度和高度

网页在浏览器渲染展示的过程中,会按网页指定的属性来显示。如果只在CSS里面设置图片的宽度或高度,就会导致渲染时间长,打开速度慢。具体属性为: width="200" 宽度为200象素, height="200" 高度为 200象素。所以在可以指定的情况下,建议应指定图片的宽度和高度,以加快浏览器的渲染速度。

五、img标签是自关闭标签

任何的XHTML标签都应该关闭,img标签的关闭方法是在自己标签结束之前加上反斜杠“/”。这也是W3C标准所要求的,可以使网页更规范,让浏览器快速识别,提高打开速度。

学文培训黄老师认为:优化无小事,在网页设计制作的过程中,有大量的优化技巧需要植入进去,这样才能做出好的网站,在以后的运营过程中才会有更好的表现。