图片alt属性添加方法

原文地址：http://blog.sina.com.cn/s/blog_7ee3154e0102woet.html

       写过代码的人知道，如果网页中要写入一张图片，规范的写法是写入图片的宽度width和高度height以及alt属性。很多人不理解为什么要添加这么多代码，认为代码越精简越好，少了这三个属性，图片依旧显示完好。但是如果我们不给图片添加高和宽，会增加计算的时间，打开的速度会受到影响。当网页中图片过多且加载较慢，服务器请求失败的时候，图片有可能就不显示，也没有提示，影响用户的体验。这时，如果我们给图片加上一个alt属性，就能很好地解决问题。

       图片alt设置的意义在于解决用户体验的问题，也可以说所有的优化操作都是解决用户的体验问题。图片的alt属性是图片的替代文本，如果没有alt属性，搜索引擎和用户将无法或者难于判断图片所要表达的内容。我们在百度搜索绿萝，则会搜索到与绿萝相关的网站和图片，我们打开网站分析，图片加了alt属性的页面得以很好的排序展现，更直观也更直接的让用户找到需要的信息。图（1）所示

 图（1）图片alt属性设置规范

       那么如何设置图片的alt属性才是规范的呢？图片alt属性设置的替代文本必须与图片相符。如图（2）所示。图片中包含关键字如彩页、宣传单，如果将alt属相设置为“彩色的纸”或者“美食”则不符合规范。一个好的图片alt是既包含关键字又能准确表达图片所要表达的意思的。通常我们可以使用延伸的关键词来做替换文本，如果将下面的属性设置为“广州彩色宣传单印刷”会不会更好呢。

图（2）彩页宣传

       在优化过程中有许多误区，有的人放大了图片alt的作用，堆砌关键词，这样的做法是不好的，图片alt属性对网站的排名的效果并没有那么明显。我们还要避免一个alt属性表达多个核心，多核心也就相当于没有核心。比如你想表达方向盘、车轮、车的标志，其实你想表达的就是一辆汽车。设置好alt属性后，我们还要检查设置的长尾词是否符合用户的搜索习惯和表达习惯。用错了方法，我们的努力就是白费的。

我总结了几个图片alt属性的案例：

1.图片不添加alt属性。这是不符合规范的做法，我们一定要避免，如图（3）

错误的alt是设置

2.在网站中只添加相关的图片，下面这幅图片是出自装修网站，家庭装修也需要摆放盆栽以及了解包养的方法。下图的alt属性简洁明了地告诉了浏览者这是一张金鱼吊兰图片，符合用户的搜索规则。如图（4）

图（4）金鱼吊兰图片alt属性设置

3.正确的图片alt代码添加标准案例，既有图片宽高，也有alt属性。如以下代码：

 总结：在网站中，用户只有通过图片或视频以及文字的方式获取信息，如果一个网站或是一篇文章，图文结合能给用户带来良好的搜索和阅读体验。所以图片要能准确传达信息，我们可以通过分析解决用户的客观需求和隐性需求。我们在图片上尽可能的不添加水印，保持图片的尺寸统一外，添加合适的图片alt属性，这样的添加方法才能使页面美观，更符合搜索引擎的判断标准。