<img>和background-img区别

1、 是否占位

background-image是背景图片，是css的一个样式，不占位

<img />是一个块状元素，它是一个图片，是html的一个标签，占位

2、否可操作

background-image是只能看的，只能设置background-position, background-attachment,  background-repeat

<img />是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作。所以如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用img。

3、 加载顺序不同

在网页加载的过程中，以css背景图存在的图片background-image会等到结构加载完成（网页的内容全部显示以后）才开始加载，而html中的标签img是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签img的内容，再加载背景图片background-image，如果你用引入了一个很大的图片，那么在这个图片下载完成之前，img后的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容。

4、从解析机制看

Img属于html标签，background是css方法。一个页面由html、css、js组成，按照浏览器解析机制，html标签优先解析。大家都知道css文件会放在head加载，但是这并不意味着它会立即执行，而是在html加载完后才执行的。所以重要的元素，如logo就应该使用img。

如果仅仅是为了显示一张图片，比如banner、广告图等，建议采用background方式。因为不重要的自动往后排，避免占用带宽，造成数据阻塞。

如果图片很多，这里又出现一个新的问题，不同的浏览器支持的并发加载数量是不一样的，（最新测试）IE是10个，FF是10个，图片多，就会出现严重的延迟或者404，因为图片加载慢会影响到页面主要数据呈现，那么让用户看到的都是空白，你好意思让他继续等下去吗！所以，如果不采用lazyload还是采用background比较好。

Img标签优点是自闭和，可以避免空标签出现（空标签也是w3c验证的内容之一）。采用background方式就会出现空标签，bootstrap中的icon都是用i标签加入的，而i标签中是空内容，这样就产生了空标签（并不是说这样做不好，利弊等会聊）。

5、从SEO角度看

刚才说了，Img标签是自闭和的，不能添加文本内容，但是，Img有一个alt属性，而且这个属性在w3c标准中，要求必须有，这样做的优点还是很多的。

第一，图片比较大，或者用户网速比较窝火的时候，加载失败了，至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图，那就多刷几次去加载。另外，alt属性有利于辅助阅读，尤其是对盲人朋友，他们使用阅读器浏览页面，如果没有文本提示，就太不厚道了。

第二，alt属性有利于SEO，搜索引擎实现很好的图像识别还是有一段路要走。

当然缺点也是有滴：

第一，Img加载的图片是通过src拿到的，如果HTML代码不允许修改，那怎么换图，只有同名文件替换，但是有可能遇到304状态，需要服务器端做相应的设置。这时background的优点就出来了，换皮肤就是这个栗子。

第二，如果图片显示区域空间大小是预留的，那么图片必须和预留的空间一致，否则图片要么被拉伸要么被压缩，都不是等比例操作。当然，避免这种问题就需要前端和视觉设计师遵守一定的规范。

6、语义化角度

Background和语义化不沾边了，Img是HTML标签，语义明确。

 

建议：重要的需要优先加载的图片最好采用img。不重要的图片最好采用background。

做SEO是最方便的还是background，图片是放在背景上的，前景写内容，两不误。如果不想让内容显示出来，就加text-indent， -99999你懂的。（以前有这种玩法，是搜索引擎算法单一的年代，关键字比重高 排名就靠前）。

刚才提了一下bootstrap的background方法，bootstrap的做法是用background设置icon，icon的使用太灵活了，所以必须模块化，语义化先靠边站，鱼与熊掌不可兼得。PS：bootstrap v3之后采用了icon font

其次icon的重要性真不高，放在最后加载还减少了带宽占用量，提高PV速度。

img标签语义很明确不能乱用，所以bootstrap采用无语义的i标签来设置icon也挺好。PS：自己项目中使用无语义标签要注意是否向前兼容，要关注HTML5中的定义。