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

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

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

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

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

此外，我有一个画廊部分，有不一致的图片大小，所以即使这些图像显然被认为是内容，我使用背景图像和中心它们在divs设置大小。这类似于facebook在他们的相册里做的事情。

当我想让它们100%可拉伸时，我使用image而不是background-image，大多数浏览器都支持。

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.

如果您将CSS放在外部文件中，那么将站点中频繁使用的图像(例如头部图像)显示为背景图像通常是很方便的，因为这样您以后就可以灵活地更改图像。

例如，假设你有以下HTML:

<div id="headerImage"></div>

.．.和CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(Images/headerImage.png) no-repeat;
}

几天后，您更改了图像的位置。你所要做的就是更新CSS:

#headerImage {
    width: 200px;
    height: 100px;
    background: url(../resources/images/headerImage.png) no-repeat;
}

否则，您必须在每个HTML文件中更新适当的<img>标记的src属性(假设您没有使用服务器端脚本语言或CMS来自动化该过程)。

另外，如果你不希望用户能够保存图像，背景图像也是有用的(尽管我从来没有需要这样做)。