另一个背景-图像PRO: <ul>/<ol>列表的背景-图像。

如果背景图像是整体设计的一部分，并且在多个页面上重复使用，则使用背景图像。最好以背景精灵的形式进行优化。

对所有不属于整体设计的图像使用标签，并且很可能只放置一次，比如文章、人物的特定图像，以及值得添加到谷歌图像中的重要图像。

**我在<img>标签中唯一重复的图像是网站/公司标志。因为人们倾向于点击它进入主页，所以你用<a>标签来包装它。

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

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

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

在多个皮肤或设计版本的情况下使用CSS背景图像。Javascript可以用来动态地改变一个元素的类，这将迫使它呈现不同的图像。如果使用IMG标签，可能会更加棘手。

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

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

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