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

在什么情况下，与IMGCSS相对，使用HTML 标签显示图像更合适，background-image反之亦然？

因素可能包括可访问性，浏览器支持，动态内容或任何类型的技术限制或可用性原则。

正确使用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拉伸背景图像以填充其整个窗口。

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

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

我很惊讶还没有人提到：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过渡的更多信息。

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

何时使用 <img />

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

何时使用CSS background-image

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

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

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

如果您将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来自动执行该过程）。

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

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

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

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

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

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

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

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

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

• 当您需要在精灵之间进行动态切换时，使用背景图片非常有用。例如，如果您有一个按钮图像，并且希望在光标悬停在元素上时显示单独的图像，则可以使用同时包含普通和悬停精灵的背景图像，并动态更改背景位置。

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

前景= img。

背景= CSS背景。

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

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

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

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

总之，这是非常情况。

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

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

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

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

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

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

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

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

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

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

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

来自法国巴黎的网络学生

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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