如何区别使用背景图 or img标签

---

title: 如何区别使用背景图 or img标签
date: 2016-06-23
tags: [SEO,搜索引擎,背景图]

设计图转html时，使用img标签or使用background-image如何进行判断？有没有什么原则？

区别和原则

• img标签，作为一个插入的图片应该添加alt属性；背景图应该是没有具体语义的图。
• 浏览器解析机制决定了img可以被优先加载，而背景图会靠后。
• css3可以很好的处理背景图动画，但是img需要js配合。
• 原则就是：如果这个图片是内容的一部分，就用img。
  什么时候用img？
  1.这个图是内容的一部分，而不是背景。
  2.如果图片加载不出来，需要alt属性告诉用户这是什么。
  3.当你需要打印这个页面，img可以打印出来，而背景图会被忽略。
  4.当你需要无障碍阅读这个页面（如盲人阅读器）的时候，只有img图的alt属性是被传递的信息。
  5.该图需要被SEO（搜索引擎优化），需要被搜的到，alt很重要。
  6.这个图需要被优先第一时间加载并呈现给用户。
  什么时候用background-image？
  1.和内容无关，可以被忽略，可能只是美化作用。
  2.这可能是个背景，或提示信息，如图标／背景动画等。
  3.需要处理css3动画的效果。
  参考资料：
  1.http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image
  2.http://blog.sina.com.cn/s/blog_6722ab160101bnn7.html