简单来说，img是内容部分的东西，background-image是修饰性的东西。
稍微加点文字就是
img
从页面元素来说，如果是页面中的图片是作为内容出现的，比如广告图片，比如产品图片，那么这个必然是用img了，因为这个是页面元素内容。页面元素内容最关键的一点就是，当页面没有样式的时候，还是能一眼看过去就知道什么是什么……
background-image
背景图片，修饰性的内容，在页面中可有可无。有，是为了让页面中视觉感受上更美；无，并不影响用户浏览网页获取内容。
裸奔
其实说白了，背景图片就是通过样式加载后，让页面更漂亮而已，内容图片就是为了展示给用户的。假设有一天你的网页没有任何样式的时候，那么这个时候请想想你的网站上哪些图片是给用户看的，这样就足够了。
前景图img是数据性的东西，属于页面要展现的内容。
背景图是修饰性的东西，不要也罢。
比如，用户图像，肯定是前景图了；产品列表的图片，也是前景图了。
但是产品列表的图片，有的左上方有个推荐的标签，减价的标签，肯定就是修饰咯。
原理上的区别：
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标签中是空内容，这样就产生了空标签（并不是说这样做不好，利弊等会聊）。
总结：
1.写在css里面的图片是以背景图形式存在的，而写在html里的是以html插入img的区别标签形式存在的，在网页加载的过程中，以css背景图存在的图片会等到结构加载完成（网页的内容全部显示以后）才开始加载
2.通常是非内容的图片就写在css里面，如果是内容性的图片就写在html里面网页设计方向是表现层和内容层分离，css管表现，也就是显示效果，html管结构，内容结构的划分，这样代码要简洁易维护一些。
3.浏览器读取页面，css背景图和img图片都会下载到本地缓存文件夹，css背景图和img图片在网页中都可以重复使用。
4.图片做为背景，在图片没加载的时候或者加载失败的时候，不会有个图片的占位标记，不会出现红叉。