img 与 background-image

https://cloud.tencent.com/developer/article/1337286

项目	image	backgroud-image
所属	dom元素、内容类、	css样式、修饰类、
图层位置	前景	背景
默认初始尺寸	不定	固定
是否会产生回流重绘	会	不会
图片加载失败	dom尺寸默认0，点击事件难以响应	dom背景无，其他点击事件正常
样式文件加载失败	正常显示	dom消失
使用场景	logo、产品图片、广告图片	背景图、角标等

从上面可以看出来，img更适合作为内容部分渲染到页面里面，即便样式文件加载失败，也要让用户可以看到的，属于必须要的元素，特别适合作为广告宣传、产品展示类的使用。 而background则相对更适合做修饰类的，即便没能正常加载也并不影响页面整体的内容展示和用户交互，属于锦上添花类型的。

但是这两种方式又都存在着表中所列出的一些问题，针对这些问题，可以做如下优化：
1、img标签指定宽高尺寸，避免页面回流重绘。指定alt属性或者默认图片，在图片加载失败的时候备用。
2、logo元素同时使用img标签和background，并指定不同的图片源，比如一个用资源服务器图片，一个用base64编码(合适的话)，避免那个元素加载不出来导致