何时使用IMG与CSS背景图像？

Question

在什么情况下使用HTML IMG标记来显示图片更合适，而不是CSS background-image，反之亦然？

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

Answer 1

正确使用IMG

1. 如果您打算使用IMG 人print your page，您希望默认情况下包含图片。 - JayTee
2. 当图片具有重要的语义含义时，请使用IMG（带alt文字），例如a warning icon。这确保了图像的含义可以在所有用户代理（包括屏幕阅读器）中传达。

IMG的实用用途

1. 如果是图片，请使用IMG加alt属性 是part of the content，例如徽标或图表或人物（真实的人，而非股票照片的人）。 - sanchothefat
2. 如果依靠浏览器缩放来渲染图像与文本大小成比例，请使用IMG。
3. 使用IMG multiple overlay images in IE6。
4. 按顺序使用IMG和z-index 到stretch a background image填充整个窗口。
   注意，CSS3 background-size不再适用;见下面的＃6。
5. 使用img代替background-image可以显着提高背景动画的效果。

何时使用CSS background-image

1. 如果使用CSS背景图片 图片is not part of the content。 - sanchothefat
2. 何时使用CSS背景图片 做image-replacement of text例如。段落/头。 - sanchothefat
3. 如果您打算使用background-image 人print your page并且您不希望默认情况下包含图像。 - JayTee
4. 如果您需要改善下载时间，请使用background-image 与CSS sprites。
5. 如果只需要部分图片可见，请使用background-image，与CSS精灵一样。
6. 将background-image与background-size:cover一起使用，以拉伸背景图片以填充整个窗口。

Answer 2

这对我来说是一个黑白分明的决定。如果图像是内容的一部分，例如徽标或图表或人（真实的人，而不是股票照片人），则使用<img />标记加alt属性。其他一切都有CSS背景图片。

使用CSS背景图像的另一个时间是进行文本的图像替换，例如。段/报头。

Answer 3

我很惊讶没有人提到这一点： 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/>的{​​{1}}。

有关MDN转换的详细信息。

Answer 4

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

何时使用<img />

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

何时使用CSS background-image

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

因为我会基于这些原因使用它们。这些是图像搜索引擎优化的良好实践。

Answer 5

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

Answer 6

如果您将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自动化过程。）

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

Answer 7

与sanchothefat's answer大致相同，但来自不同的方面。我总是问自己：如果我要从网站上完全删除样式表，那么剩余的 元素是否属于内容？如果是这样，我做得很好。

Answer 8

有些答案在这里过于复杂。这是一个死的简单情况。

每次想要放置图片时，只需回答这个问题：

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

如果你不能回答这个问题，你可能不知道你在做什么或者你想做什么！

此外，请不要考虑这两种技术，只是因为您希望与“打印机友好”。另外，请勿使用CSS隐藏SEO的观点。如果您发现自己在CSS文件中管理自己的内容，那么您就会陷入困境。对于什么是内容与否，这只是一个微不足道的决定。其他方面都应该被忽略。

Answer 9

我会添加另外两个参数：

• 如果您需要调整大小图片， img 标记就会很好。例如。如果原始图像是100像素×100像素，并且您希望它是80像素×80像素，则可以设置img标记的CSS宽度和高度。 我不知道使用背景图像做任何好方法。编辑：现在也可以使用background-size CSS3属性使用背景图像。

• 当您需要动态在精灵之间切换时，使用 background-image 是很好的。例如。如果你有一个按钮图像，并且你希望当光标悬停在元素上时显示一个单独的图像，你可以使用包含普通和悬停精灵的背景图像，并动态地改变背景位置。

  < / LI>

Answer 10

前景= img。

背景= CSS背景。

Answer 11

使用＆lt; IMG＆gt;的另一个好处标签与SEO有关 - 即您可以在图像标签的ALT属性中提供有关图像的其他信息，而在通过CSS指定图像时无法提供此类信息，在这种情况下，只能将图像文件名称编入索引通过搜索引擎。 ALT属性肯定会给出＆lt; IMG＆gt;标签SEO优于CSS方法。这就是为什么我认为最好使用＆lt; IMG＆gt;指定想要在图像搜索结果（例如Google图像搜索）中排名良好的图像。标签

Answer 12

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

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

Answer 13

使用背景图片，您需要绝对指定尺寸。如果您事先并未事先了解它们或无法确定它们，这可能是一个重大问题。

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

总之，这是非常情境化的。

Answer 14

应该使用background-image的其他几种情况：

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

Answer 15

在多个外观或设计版本的情况下使用CSS background-image。 Javascript可用于动态更改元素的类，这将强制它呈现不同的图像。使用IMG标签，可能会更棘手。

Answer 16

这是一个技术考虑因素：图像会动态生成吗？在HTML中生成<img>标记比尝试动态编辑CSS属性要容易得多。

Answer 17

关于使用CSS TranslateX / Y制作动画图像（动画html的正确方法） - 如果你进行Chrome时间轴录制的CSS背景图像动画与IMG标签动画，你会看到绘画时间大大缩短用于CSS背景图像。

Answer 18

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

Answer 19

图像大小怎么样？如果我使用img标签，浏览器会缩放图像。如果我使用css背景，浏览器只会从较大的图像中剪切一块。

Answer 20

此外，我有一个画廊部分，图片大小不一致，所以即使这些图像显然被视为内容，我使用背景图像并将它们居中在具有设定大小的div中。这与facebook在他们的专辑中所做的类似..

Answer 21

img 是一个html标记，因为它应该被使用。用于引用或说明事物的人，例如：在文章中。

此外，如果图片 具有含义 或必须可点击， img 优于 css背景。对于所有其他情况，我认为可以使用 css背景。

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

来自法国巴黎的网络学生

Answer 22

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

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

Answer 23

小输入， 我的响应式图像在iphone上的渲染速度减慢了一分钟，即使图像很小，我也遇到了问题：

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

但是当切换到使用背景图片时，问题就消失了，这只有在定位更新的浏览器时才可行。

Answer 24

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

Answer 25

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

Answer 26

另请注意，大多数搜索引擎蜘蛛都不会将CSS背景图像编入索引，因此背景图像将被忽略，您将无法从搜索引擎获得任何流量（简而言之，没有SEO优势）。

所有使用标签定义的图像都被编入索引（除非手动排除），并且如果他们的标题/ alt属性和文件名被正确优化（w.r.t某些关键字），则可以从搜索引擎引入流量。

Answer 27

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

Answer 28

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

Answer 29

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

Answer 30

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

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

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

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

Answer 31

只是为了投入一个扳手 - 我认为你永远不应该使用img标签。 HTML用于内容，而不是视觉风格。您网页上的所有图片都应该来自CSS，让您的HTML代码保持纯净。 （即使建立起来需要更长的时间）