在开发中，图片的展示方式有两种，第一种是使用 img 标签去显示，第二种是以背景图片显示，也就是使用css 的background-image，但是究竟应该使用哪一种呢？
一、从操作性去考虑
background-image 是只能看的，只能设置 background-position, background-attachment, background-repeat，而img 标签是一个document对象，是可以操作的。比如更换 img的src的属性可以达到更换图片的目的，也可以移动它的位置，可以从 document 中移除等等操作。所以如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用 img
二、从加载顺序去考虑
在网页加载的过程中，以 css 背景图存在的图片 background-image 会等到结构加载完成（网页的内容全部显示以后）才开始加载，而 html 中的标签 img 是网页结构（内容）的一部分会在加载结构的过程中加载，换句话讲，网页会先加载标签 img 的内容，再加载背景图片 background-image ，如果引入了一个很大的图片，那么在这个图片下载完成之前，img 后面的内容都不会显示。而如果用css来引入同样的图片，网页结构和内容加载完成之后，才开始加载背景图片，不会影响你浏览网页内容
三、从解析机制去考虑
img 属于 html 标签，background-image 是 css 样式，众所周知一个页面由 html、css、js 组成，按照浏览器解析机制，html 标签是会被优先解析。虽然很多 css 文件都会放在 head 加载，但是这并不意味着它会立即执行，大部分情况下是在 html 加载完后才执行的。所以重要的元素，如 logo 就应该使用 img，但是如果仅仅是为了显示一张图片，比如banner、广告图等，建议采用background-image 方式。因为不重要的自动往后排，避免占用带宽，造成数据阻塞。
如果图片很多，不同的浏览器支持的并发加载数量是不一样的，（最新测试）IE是10个，FF是10个，图片多，就会出现严重的延迟或者404，因为图片加载慢会影响到页面主要数据呈现，那么让用户看到的都是空白，你好意思让他继续等下去吗！所以，如果不采用懒加载还是采用 background-image 比较好
四、从SEO角度区考虑
img 标签是自闭和的，不能添加文本内容，但是 img 有一个 alt 属性，而且这个属性在w3c标准中，要求必须有，这样做的优点还是很多的。
第一，图片比较大，或者用户网速比较慢的时候，加载失败了，至少还有文字提示告诉用户这里是个什么内容的图片。如果用户非要看这个图，那就多刷几次去加载。另外，alt 属性有利于辅助阅读，尤其是对盲人朋友，他们使用阅读器浏览页面，如果没有文本提示，就太不厚道了。
第二，alt 属性有利于SEO，搜索引擎实现很好的图像识别还是有一段路要走。
五、从语义化角度考虑
background-image 和语义化不沾边了，img 是 HTML 标签，语义明确
六、总结
重要的需要优先加载的图片最好采用 img ，不重要的图片最好采用 background-image
