什么时候使用IMG与CSS背景图像？

在什么情况下更适合使用超文本标记语言IMG标记来显示图像，而不是CSSbackground-image，反之亦然？

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

447162 次浏览
小开

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

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

小开

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

小开

这里有一个技术上的考虑：图像是否会动态生成？用超文本标记语言生成<img>标记往往比尝试动态编辑CSS属性容易得多。

小开

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

小开

如果您的CSS在外部文件中，那么将站点上经常使用的图像（例如标题图像）显示为背景图像通常很方便，因为这样您就可以灵活地稍后更改图像。

例如，假设您有以下超文本标记语言：

<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;}

否则，您必须在每个超文本标记语言文件中更新相应的<img>标记的src属性（假设您没有使用服务器端脚本语言或CMS来自动化该过程）。

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

小开

与桑乔特法特的回答大致相同，但从不同的方面来看。我总是问自己：如果我要从网站上完全删除样式表，剩余的元素只有是否属于内容？如果是这样，我做得很好。

小开

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

小开

前台=img.

背景=CSS背景。

小开
最佳答案

正确使用IMG

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

IMG的实际应用

  1. 如果图像使用IMG加alt属性是部分内容，例如徽标或图表或人物（真人，而不是股票照片人物）。-桑乔脂肪
  2. 如果您依赖浏览器缩放来呈现与文本大小成比例的图像，请使用IMG。
  3. 使用IMGIE6中的多个叠加图像.
  4. 按顺序使用IMG和z-index拉伸背景图像来填充它的整个窗口。请注意，这不再适用于CSS3 backbacks-size；请参阅下面的#6。
  5. 使用img而不是background-image可以显着提高背景动画的性能。

何时使用CSS背景图像

  1. 如果使用CSS背景图像图片不是内容的一部分-桑乔脂肪
  2. 当使用CSS背景图像时做文本图像替换例如。段落/标题。-桑乔脂肪
  3. 如果您打算使用background-image人打印您的页面，您不希望默认情况下包含图像。-JayTee
  4. 如果需要改进下载时间，请使用background-image，如CSS精灵.
  5. 如果您只需要图像的一部分可见，请使用background-image，就像CSS精灵一样。
  6. 使用background-image和background-size:cover来拉伸背景图像以填充其整个窗口。
小开

只是为了在工作中扔一个扳手-我认为你永远不应该使用img标记。超文本标记语言用于内容，而不是视觉风格。您页面上的所有图像都应该来自CSS，让您的超文本标记语言代码纯净。（即使它确实需要更长的时间来构建）

小开

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

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

总之，这是相当情境化的。

小开

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

使用图像的主要优点之一是它是更好的SEO。

小开

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

此外，如果图像有意义或必须可点击，则img比css背景更好。对于所有其他情况，我认为可以使用css背景。

尽管，这是一个需要反复讨论的话题。

来自法国巴黎的网络学生

小开

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

小开

我还要补充两个论点：

  • 如果您需要调整图像的大小，img标签是很好的。例如，如果原始图像是100px 100 px，并且您希望它是80px 80px，您可以设置img标签的CSS宽度和高度。我不知道有什么好的方法可以使用backback-image来做到这一点。编辑：这现在也可以使用backback-image来完成，使用background-size

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

小开

只是一个小的添加，如果您希望用户能够“右键单击”和“保存图像”/“保存图片”，那么如果您打算将图像作为其他人的资源提供，则应该使用img标签。

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

小开

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

小开

应该使用background-image的其他几个场景：

  • 当鼠标悬停在图像上时，您希望图像发生变化。
  • 当您想在图像中添加圆角时。如果您使用img，图像会从圆角中泄漏出来。
小开

关于动画图像使用CSS TranslateX/Y（动画html的正确方法）-如果你做一个Chrome时间轴记录的CSS背景图像被动画vs IMG标签被动画你会看到油漆时间大大缩短CSS背景图像。

小开

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

小开

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

小开

使用标签的另一个好处与SEO有关-即您可以在图像标签的ALT属性中提供有关图像的附加信息，而在通过CSS指定图像时无法提供此类信息，在这种情况下，只有图像文件名可以被搜索引擎索引。与CSS方法相比，ALT属性无疑赋予了标签SEO优势。这就是为什么在我看来，最好使用标签指定您想要在图像搜索结果中排名良好的图像（例如Google图像搜索）。

小开

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

小开

有些答案使情况过于复杂。这是一个非常简单的情况。

只要回答这个问题，每次你想放置一个图像：

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

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

另外，不要仅仅因为你希望是否“打印机友好”而考虑这两种技术之外的因素。也不要使用CSS从SEO的角度隐藏内容。如果你发现自己在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上的转换的更多信息。

小开

一个小输入，我遇到了响应式图像减慢iphone渲染速度长达一分钟的问题，即使是小图像：

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

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

小开

超文本标记语言用于内容，CSS用于设计。图像是否必要以及是否需要由屏幕阅读器拾取？如果答案是肯定的，那么将图像放入超文本标记语言中。如果纯粹是为了样式化，那么您可以使用CSS中的background d-image属性来注入图像。正如这里的很多人已经提到的，如果您愿意，您可以在图像上使用伪元素。

小开

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

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

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

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

小开

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

小开

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

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

小开

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

什么时候使用<img />

  1. 当您的图像需要搜索引擎收录时
  2. 如果它与内容有关，包括卡片（点击区域），但与设计无关。设计可能是这里最难解析的东西，因为它都是设计。我会说也许是功能设计（卡片、缩略图、个人资料图像、你可以点击的东西）与美学设计，后者主要用于网站吸引力。
  3. 列表项
  4. 如果你的图像不是太小（不是标志性的图像）。
  5. 可以添加alt和title属性的图像。
  6. 要使用打印媒体css打印的网页中的图像

什么时候使用CSSbackground-image

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

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


提交答案