在什么情况下使用HTML IMG标记来显示图像更合适，而不是CSS背景图像，反之亦然?
这些因素可能包括可访问性、浏览器支持、动态内容或任何类型的技术限制或可用性原则。
当前回答
还有一个原因!如果你有一个响应式的设计，并且想通过媒体查询来划分低分辨率、中分辨率和高分辨率图像的使用，那么你也应该使用背景。
其他回答
以上回答只考虑设计方面。我在搜索引擎优化方面列出了它。
何时使用<img />
When Your Image need to be indexed by search engine If it has relation to content, including cards (click areas), but not related to design. Design is probably the most difficult thing to parse here because so it's all design right. I would say perhaps functional design (Cards, thumbnails, profile images, things you can click) vs Aesthetic design which is mostly used for sites appeal. List item If your image is not too small ( not iconic images ). Images where you can add alt and title attribute. Images from a webpage which you want to print using print media css
何时使用CSS背景图像
纯粹用于设计的图像。 与内容无关。 小图像，我们可以玩CSS3。 重复图片(在博客作者图标中，每篇文章都会重复日期图标等)。
因为我将基于这些原因使用它们。这些都是图像搜索引擎优化的良好实践。
对我来说，这是个非黑即白的决定。如果图像是内容的一部分，如logo、图表或人物(真实人物，而不是库存照片人物)，则使用<img />标记加上alt属性。其他的都有CSS背景图片。
另一个使用CSS背景图像的时间是在做文本的图像替换时。段落/头。
一个小的输入， 我曾经遇到过响应式图像在iphone上的渲染速度减慢长达一分钟的问题，即使是小图像:
<!-- Was super slow -->
<div class="stuff">
<img src=".." width="100%" />
</div>
但是当切换到使用背景图像时，这个问题就消失了，这只有在针对较新的浏览器时才可行。
IMG首先加载，因为src是在html文件本身，而在背景图片的情况下，源是在样式表中提到的，所以图片在样式表加载后加载，延迟了网页的加载。
浏览器并不总是默认设置为打印背景图像;如果你想让别人打印你的页面:)
