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

IMG首先加载，因为src是在html文件本身，而在背景图片的情况下，源是在样式表中提到的，所以图片在样式表加载后加载，延迟了网页的加载。

以上回答只考虑设计方面。我在搜索引擎优化方面列出了它。

何时使用<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。 重复图片(在博客作者图标中，每篇文章都会重复日期图标等)。

因为我将基于这些原因使用它们。这些都是图像搜索引擎优化的良好实践。

一个小的输入， 我曾经遇到过响应式图像在iphone上的渲染速度减慢长达一分钟的问题，即使是小图像:

<!-- Was super slow -->
<div class="stuff">
    <img src=".." width="100%" />
</div>

但是当切换到使用背景图像时，这个问题就消失了，这只有在针对较新的浏览器时才可行。

One more benefit from using the <IMG> tag is related to SEO - i.e. you can provide additional information about the image in the ALT attribute of the image tag, while there's no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines. The ALT attribute definitely gives the <IMG> tag SEO advantage over the CSS approach. That's why according to me it is better to specify the images you want to rank well in the image search results (e.g. Google Image Search) using the <IMG> tag.

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

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