Img VS background-image

​选择以上哪种方式主要考虑以下几点：

1. 无障碍性
   img 中可以设置alt 与 title，这两个属性可以更好的无障碍性以及更好的SEO。

2. 性能​两种方式加载图片性能不同。​使用background-image 加载一堆大的图片，由于浏览器需要花较长的时间去解析CSS文件以及下载这个图片，使得整个页面的加载都会被延迟。

   img 标签加载图片时，其请求是在HTML解析文件时所发出的，即便图片未加载成功，用户也可以阅读其他内容。​

3. 可操作性

   如果只是为了美观而不考虑其性能而加载小的图片，则可以考虑CSS方式。 其提供了多种属性如backgroung-attachment等加强了对于图片元素的操作。

   如果要在图像顶部覆盖文本，使用CSS背景图像进行原型设计也更容易。

   <img />是一个document对象，它是可以操作的。比如更换img src的路径可以达到更换图片的目的，也可以移动它的位置，从document中移除等等操作。所以如果是装饰性的图片就使用background-img，如果和文体内容很相关就使用img。

结论：
Img 有更好的无障碍性和SEO，在加载图片时也需考虑性能、操作等因素。

• 资料： HTML img tags vs CSS background-images)