只在必要的时候使用背景图像，例如容器的图像是平铺的。

其中一个主要的优点是使用图像是更好的搜索引擎优化。

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

图像的大小呢?如果我使用img标记，浏览器将缩放图像。如果我使用css背景，浏览器只是从较大的图像中切割一块。

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

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

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

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

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

我想再补充两个论点:

An img tag is good if you need to resize the image. E.g. if the original image is 100px by 100 px, and you want it to be 80px by 80px, you can set the CSS width and height of the img tag. I don't know of any good way to do this using background-image. EDIT: This can now also be done with a background-image, using the background-size CSS3 attribute. Using background-image is good when you need to dynamically switch between sprites. E.g. if you have a button image, and you want a separate image displayed when the cursor is hovering over the element, you can use a background image containing both the normal and hover sprites, and dynamically change the background-position.