何时使用IMG和CSS背景图片？

如果您只想为页面上的特殊内容或仅一页添加图像，则应使用IMG标签；如果要将图像放置在多个页面上，则应使用CSS背景图像。

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

如果背景图片是整体设计的一部分，并且在多页上重复使用，请使用背景图片。优选以背景精灵形式进行优化。

对不属于整体设计的所有图像使用标签，这些图像很可能放置一次，例如文章，人物的特定图像和应添加到Google图像中的重要图像。

**我在<img>标签中加上的唯一重复图片是网站/公司徽标。由于人们倾向于单击它转到主页，因此您用<a>标签将其包装起来。

当我想让大多数浏览器都支持100％可拉伸性时，我使用图像而不是背景图像。

还要注意，大多数搜索引擎蜘蛛不会为CSS背景图像编制索引，因此背景图像将被忽略，您将无法从搜索引擎获得任何流量（总之没有SEO优势）。

如果使用标签定义的所有图像都进行了索引（除非手动排除了这些图像），并且它们的标题/替代属性和文件名得到了适当的优化（可以输入某些关键词），就可以带来来自搜索引擎的访问量。

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

HTML用于内容，而CSS用于设计。图像是否必要，是否需要屏幕阅读器拾取？如果答案是肯定的，则将图像放入HTML。如果仅用于样式设置，则可以使用CSS中的background-image属性注入图像。正如很多人已经提到的那样，您可以根据需要在图像上使用伪元素。

一小笔输入，即使是小图像，响应图像也会使iphone的显示速度减慢一分钟，这是我遇到的问题：

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

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

IMG首先加载src是因为html是在html文件本身中，而在background-image样式表中提到了源代码，因此图像是在加载样式表之后加载的，从而延迟了网页的加载。

只需添加一小段，如果希望用户能够“右键单击”和“保存图像” /“保存图片”，则应使用img标签，因此，如果您打算将图像作为资源提供给其他。

据我所知，大多数浏览器都使用背景图片来禁用直接保存图片的选项。

img由于某种原因是html标记，因此应使用它。为了引用或说明事物，人们例如在文章中。

同样，如果图像具有含义或必须可单击，则img优于CSS背景。对于所有其他情况，我认为可以使用CSS背景。

虽然，这是一个需要反复讨论的主题。

来自法国巴黎的网络学生

另外，我的图库部分的图片大小不一致，因此即使这些图像显然被认为是内容，我也使用背景图像并将它们居中设置为div大小。这类似于facebook在其相册中所做的。

关于使用CSS TranslateX / Y（对HTML进行动画处理的正确方法）对图像进行动画处理-如果您在Chrome浏览器时间轴中记录了正在动画的CSS背景图像与正在动画的IMG标签，则您会发现CSS的绘制时间大大缩短了背景图像。

这是一个技术考虑：图像会动态生成吗？<img>与尝试动态编辑CSS属性相比，用HTML 生成标记通常要容易得多。

还有另一个原因！如果您具有响应式设计，并且想通过媒体查询为设备拆分低，中和高分辨率图像的使用，则也应该使用背景。

图像的大小呢？如果使用img标签，则浏览器会缩放图像。如果我使用CSS背景，浏览器只会从较大的图像中切出一块。

如果外观或设计版本多种，请使用CSS背景图片。Javascript可用于动态更改元素的类，这将迫使它呈现不同的图像。使用IMG标签，可能会更棘手。

background-image还应使用其他几种方案：

• 当您希望图像在鼠标悬停在其上时发生变化时。
• 当您想在图像上添加圆角时。如果使用img，则图像将从圆角泄漏。

使用背景图像，您需要绝对指定尺寸。如果您实际上并不事先知道它们或无法确定它们，那么这可能是一个严重的问题。

一个大问题<img />是覆盖。如果我想在图片（box-shadow:inset 0 0 5px rgb(0,0,0,.5)）上放置CSS内部阴影怎么办？在这种情况下，由于<img />不能有子元素，因此您需要使用定位并添加空元素，这些元素等同于无用的标记。

总之，这是非常情况。

使用<IMG>标记的另一个好处与SEO有关-即您可以在image标记的ALT属性中提供有关图像的其他信息，而在通过CSS指定图像时无法提供此类信息，因此如果只有图像文件名可能被搜索引擎索引。相对于CSS方法，ALT属性无疑为<IMG>标签提供了SEO优势。这就是为什么在我看来，最好使用<IMG>标签在图像搜索结果（例如Google Image Search）中指定要排名良好的图像。

仅在必要时使用背景图像，例如带有平铺图像的容器。

使用IMAGES的主要PROS之一是它对SEO更好。

我还要添加另外两个参数：

• 一个IMG如果你需要标记好调整图像。例如，如果原始图像是100px x 100 px，而您希望它是80px x 80px，则可以设置img标签的CSS宽度和高度。我不知道使用背景图像执行此操作的任何好方法。编辑：现在也可以使用background-sizeCSS3属性使用背景图像来完成。

• 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.

前景= img。

背景= CSS背景。

一些答案使这里的方案变得复杂。这是一个简陋的情况。

每当您要放置图片时，只需回答此问题即可：

这是内容的一部分还是设计的一部分？

如果您无法回答此问题，则可能不知道自己在做什么或想要做什么！

另外，不要仅仅因为您希望“打印机友好”而考虑这两种技术。也不要使用CSS从SEO角度隐藏内容。如果您发现自己在CSS文件中管理内容，那您将大开眼界。这仅仅是什么才是内容的简单决定。其他所有方面均应忽略。

与sanchothefat的答案大致相同，但从不同的方面来看。我总是问自己：如果我要从网站上完全删除样式表，其余元素仅属于内容吗？如果是这样，我做得很好。

我很惊讶还没有人提到CSS转换。

您可以本地转换div的背景图片：

#some_div {
    background-image:url(image_1.jpg);
    -webkit-transition:background-image 0.5s;
    /* Other vendor-prefixed transition properties */
    transition:background-image 0.5s;
}

#some_div:hover {
    background-image:url(image_2.jpg);
}

这样可以保存任何JavaScript或jQuery动画来淡化<img/>的src。

有关MDN过渡的更多信息。

如果您将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文件中更新src相应<img>标记的属性（假设您没有使用服务器端脚本语言或CMS来自动执行该过程）。

如果您不希望用户保存图像（尽管我从来不需要这样做），则背景图像也很有用。

对我来说这是一个黑白决定。如果图像是徽标，图表或人物（真实人物，而不是摄影人物）等内容的一部分，请使用<img />标签加alt属性。对于其他所有内容，都有CSS背景图片。

另一个使用CSS背景图片的时间是在替换文字的图片时，例如 段落/标题。

正确使用IMG

1. 使用IMG，如果你打算让人们打印您的网页，你想被默认包含在图像。— JayTee
2. 当图像具有重要的语义含义（例如警告图标）时，请使用IMG（带有alt文本）。这确保了可以在所有用户代理（包括屏幕阅读器）中传达图像的含义。

IMG的实际使用

1. IMG如果图像是徽标，图表或人物（真实人物，而不是摄影人物）等内容的一部分，请使用加号alt属性。— sanchothefat
2. 使用IMG，如果你依赖于浏览器的缩放比例，以文字的大小呈现图像。
3. 使用IMG 了在IE6多的重叠影像。
4. IMG与a配合使用z-index以拉伸背景图像以填充其整个窗口。
   注意，CSS3 background-size不再适用。请参阅下面的＃6。
5. 使用img代替background-image可大大提高背景动画的性能。

何时使用CSS背景图片

1. 如果图像不属于内容，则使用CSS背景图像。— sanchothefat
2. 进行文字图片替换时，请使用CSS背景图片。段落/标题。— sanchothefat
3. 使用background-image，如果你打算让人们打印您的网页，你不想被默认包含的图像。— JayTee
4. 使用background-image，如果你需要提高下载时间，与CSS的精灵。
5. 使用background-image，如果你需要对图像的仅一部分是可见的，与CSS的精灵。
6. 用于background-image与background-size:cover拉伸背景图像以填充其整个窗口。

以上答案仅考虑设计方面。我在SEO方面列出了它。

何时使用 <img />

1. 当您的图片需要由搜索引擎索引时
2. 如果与内容有关系就不要设计。
3. 如果图像不太小（不是标志性图像）。
4. 您可以在其中添加图片alt和title属性的图片。
5. 您要使用打印介质CSS打印的网页中的图像

何时使用CSS background-image

1. 纯粹用于设计的图像。
2. 与内容无关。
3. 我们可以在CSS3中玩的小图片。
4. 重复图像（在博客作者图标中，将为每篇文章重复日期图标，等等）。

因为我将基于这些原因使用它们。这些是搜索引擎优化图片的良好做法。

默认情况下，浏览器并不总是设置为打印背景图像。如果您打算让人们打印您的页面:)