HTML用于内容，CSS用于设计。图像是必要的，它需要被屏幕阅读器拾取吗?如果答案是肯定的，那么就把图像放到HTML中。如果它纯粹是为了样式化，那么您可以使用CSS中的background-image属性来注入图像。正如这里很多人已经提到的，如果愿意，可以在图像上使用伪元素。

对我来说，这是个非黑即白的决定。如果图像是内容的一部分，如logo、图表或人物(真实人物，而不是库存照片人物)，则使用<img />标记加上alt属性。其他的都有CSS背景图片。

另一个使用CSS背景图像的时间是在做文本的图像替换时。段落/头。

只是一个小的添加，你应该使用img标签，如果你想让用户能够“右键单击”和“save-image”/“save-picture”，所以如果你打算将图像作为资源提供给其他人。

使用背景图像将(据我所知在大多数浏览器上)禁用直接保存图像的选项。

这里有一个技术上的考虑:图像是动态生成的吗?在HTML中生成<img>标记往往比尝试动态编辑CSS属性容易得多。

如果您希望图像是流动的并可缩放到不同的屏幕尺寸，则可以使用IMG标记。对我来说，这些图片主要是内容的一部分。对于大多数不属于内容的元素，我使用CSS精灵来保持最小的下载大小，除非我真的想要动画图标等。

使用背景图像时，您需要明确指定尺寸。如果你事先不知道它们或无法确定它们，这可能是一个严重的问题。

<img />的一个大问题是覆盖。如果我想在我的图像上添加一个CSS内阴影(box-shadow:inset 0 0 5px rgb(0,0,0，.5))怎么办?在本例中，由于<img />不能有子元素，因此需要使用定位并添加等同于无用标记的空元素。

总之，这是一种情境。