使用 HTML img 标签还是 CSS background-image 属性
HTML img 标签
- 当它不仅是一个设计元素，还是内容的一部分，例如图表、图标或人物。
- 当你希望用户打印您的页面时默认包含图片。
- 当您想被搜索引擎索引时。Google 不会自动将背景图片编入索引。浏览器不会向辅助技术提供有关背景图像的任何信息。但是使用带有
alt和title属性的<img>标签将有助于屏幕阅读器识别。 - 当图片具有基本语义（例如，警告图标）时。
<img>标签的使用将确保可以在所有用户代理中传达含义。 - 当你依赖浏览器缩放以与文本大小成比例地呈现图片时。
- 当您想提高背景动画性能时。
CSS background-image
- 如果图片仅用于设计。
- 如果图片不是内容的一部分。
- 如果您希望用户在打印你的页面时，并且不希望默认包含图片。
- 如果您想缩短下载时间（与 CSS 雪碧图一样）。
- 如果您只需要使图片的一部分可见。
- 如果要对文本进行图片替换。
- 如果您需要拉伸背景图片以填充其整个窗口。把
background-size设置为cover。 - 如果需要重复图片。
img 标签的 width height 属性和 CSS width height 属性之间的区别：
在 CSS 中设置的width height 优先级高于 img 标签的 width height 属性
- 如果两个都不设置，图片的宽高为图片本身的宽高
- 如果只设置 img 标签的 width height 属性，图片的宽高为 img 标签中设置的宽高
- 如果两个都设置了，图片的宽高为 CSS 中设置的宽高
参考资料：