CSS 中背景background和img的区别和使用时机

网上有非常多介绍两者区别的文章，但我更关心的是这两者的使用时机。

主要区别

我先说结论：这些区别对于我们选择用什么并没有起到决定性的作用。所以了解一下就可以。
最本质的区别：
img是一个html标签，background只是css的一个属性。
含义上的区别：
从文本的含义出发，background就是用来设置背景的，可以设置颜色，也可以设置图片，但强调的是背景。而img本身就是用来显示图片的，就是用来干显示图片这活的。
网络请求上的区别：
img如果网络出问题，会显示图片裂开，backgroud直接不显示。其实这无关紧要。真的网络出问题体验都好不到哪里去，img体验相对好些。
保存图片的区别：
设置为背景，是不能鼠标右键另存为图片的，虽然通过调试器检查还是可以获取地址。
搜索引擎SEO区别:
这个是微乎其微的，如果本身是一个图片网站，这个可能还有影响，如果只是一个小图标，几乎就是没有影响。
内容组成上的区别：
对于小图标一般都有文字说明的，文字才是真正的内容，图标只是提示作用。轮播图或者商品列表图片肯定是主要内容了。但图标可能用icon-font来做。

什么时候用img,什么时候用background

在有了上面的区别作为参考，实际上，我们还是无法给出切确的答案，到底什么时候用img或者background。只是有个模糊的标准。这时候我就想着参考主流网站是怎么做的。

我对比了各大主流网站（京东，淘宝，微软，MDN，亚马逊，油管，优酷，爱奇艺，抖音网站，bilibili，王者荣耀）希望可以找到参考答案。

在开始对比前先说明svg和icon-font的区别：
1.icon-font用文字渲染，只支持单色。相对简单。
2.svg支持多色，不失真。制作相对难一点。

京东： logo是用png作为background。小图标有用图片也有用svg或者icon-font。
淘宝： logo是用png作为background。小图标都是用icon-font。淘宝有自己的icon-font库。没有找到用svg的，可能觉得用icon-font就足够了。
优酷： logo是用png作为background。小图标用svg。
爱奇艺： logo是用svg作为background。小图标用svg做background。
抖音： logo是用svg作为background。小图标有用svg和精灵图做background。
bilibili: logo是用svg,非background。小图标都是svg，不管是不是多色。
王者荣耀： logo是用png作为background。小图标用精灵图做背景。
微软： logo直接img加png图片。小图标svg。
MDN: logo是用svg,非background,小图标用icon-font。
亚马逊： logo用精灵图做background，小图标也是。
油管： logo是用svg做的，而且logo都有自己专门的html标签，并不是作为background。icon也是用svg做的。

参考答案：

上面这些都是主流网站，实现方式五花八门，不过还是可以从中观察出端倪的。

我们可以回答开头的问题了，图片到底用background还是img?
只有真正的大图片（相对于小图标）用img,例如图片列表，轮播图等。大图片用做backgroud的情况只有整个网站的背景图，或者一些情况用background布局相对来说相对简单一点。

小图标可以直接用svg或者icon-font。或者png作为background。或者svg作为background。

或者反过来说，小图标不要用img。

网站的logo到底应该用什么？
最理想的就是使用svg，因为不会失真。图标太复杂不能做成svg，做成png也说的过去。可以做成精灵图减少请求次数。也可以单独做一张，毕竟logo还是比较特殊（seo）。

总结：
1.精灵图必须用background显示。
2.小图标基本不用img。
3.能直接用svg或者icon-font直接用这两者就行。
4.除了上面这些，类似轮播图，图列表，等明显需要图片展示的地方用img.