背景
大家知道，我们想要显示一张图片，通常会用2种方法
- img标签
- 给div设置background-image
那么这两种方式的共同点在哪呢？他们又有什么区别呢？
img
属于html标签，基本用法如下：
<img src="./img/add.png"/>
Img标签不能添加文本内容，但是，它有一个alt属性。
- 当图片较大或网速较慢导致图像加载失败时，alt可以给我们一个提示
- 对于使用阅读器浏览网页的人来说，alt属性有助于辅助阅读
- alt属性有利于SEO
- 若图像显示区域大小固定，图像和预留空间宽高需要一致，否则图像可能会被拉伸/压缩
background-image
background-image是CSS属性，用于设置元素背景图片，基本用法如下所示
background-image: url('../../assets/images/palletCarding/xxxx.png')
区别
加载时机
img 比 background-image 先加载，因为img属于DOM元素，而渲染过程会先解析 DOM 树，再解析CSS文件
因此重要元素，如logo建议使用img， background-image 更适合作为 banner 轮播图、广告图。因为 banner 通常都是广告，可以晚点加载，避免占用带宽过多造成阻塞
图像渲染
我们在demo中添加了img标签和background-image，使用同一张图片显示
由图可知，img 即使不手动设置宽高，也会按照图片的原有宽高渲染出来
而background背景图依托于DOM元素，不能撑开元素，若不给div设置宽高，图片就不会渲染
此外，img的宽高设置可以直接改变图片显示大小，我们给img加上宽高试试
background-image 可以配合背景图片相关属性，实现各种效果，比如雪碧图、平铺瓷砖等，这是 img 元素做不到的。
雪碧图是一种将多张图片拼接在一起的技术，可以减少网页加载时间
如下所示，现在我们用 background-position 属性指定背景图像的初始位置，从左边缘向左100px，从上边缘向下移动100px，这样就可以显示出雪碧图中的特定部分
SEO
SEO(Search Engine Optimization)，利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
搜索引擎更喜欢在网页初始化的时候，img标签与src的链接一起被加载出来。在SEO优化层面，img标签会比background背景图片更有优势
语义化
语义化：合理HTML标记以及其特有的属性去格式化文档内容，使得机器更容易理解数据和信息
显而易见，因为img是HTML标签，语义明确
图片保存
在浏览器中
- img 元素默认可以鼠标右键保存图片。但 background-image 不行。
- img标签渲染的图片，可以用鼠标轻松拖动到桌面实现下载
写在最后
我们需要区分不同场景选择合适的方式去渲染图像
- 一般来说，重要的图像或者需要优先加载的图片我们最好用
；优先级次之的图片采用background
- img标签有利于SEO，img标签语义化明确
- img有利于图像保存
