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

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

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

正确使用IMG

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

IMG的语用

  1. 如果图像是标志，图表或人物（真人，不是股票照片的人） 的内容的一部分，使用IMG加alt属性。 – sanchothefat
  2. 如果您依靠浏览器缩放比例来渲染图像，请使用IMG 。
  3. 在IE6中使用IMG处理多个叠加图像 。
  4. 使用带有z-index IMG来拉伸背景图像以填充整个窗口。
    请注意，CSS3 background-size不再是这样; 见下面的＃6。
  5. 使用img而不是background-image可以显着提高背景animation的性能。

何时使用CSS background-image

  1. 如果图片不是内容的一部分，请使用CSS背景图片。 – sanchothefat
  2. 使用CSS背景图像进行图像replace时，例如。 段落/头。 – sanchothefat
  3. 如果您打算让人们打印您的页面，并且您不希望图像被默认包含，请使用background-image 。 – JayTee
  4. 如果您需要提高下载时间，请使用background-image ，就像使用CSS精灵一样 。
  5. 如果只需要background-image的一部分可见，则使用background-image ，就像使用CSS精灵一样。
  6. 使用background-image与background-size:cover为了拉伸背景图像填充整个窗口。

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

另一次使用CSS背景图像是在做文本的图像replace例如。 段落/头。

我很惊讶没有人提到这个： 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); }

这可以保存任何types的JavaScript或jQueryanimation来淡化<img/>的src 。

有关MDN上的转换的更多信息。

以上答案只考虑devise方面。 我在SEO方面列出它。

何时使用<img />

  1. 当你的图片需要被search引擎索引
  2. 如果它与内容不相关的devise。
  3. 如果你的图像不是太小（不是图标的图像）。
  4. 您可以添加alt和title属性的图像。
  5. 从您想要使用打印介质css打印的网页的图像

何时使用CSS background-image

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

正如我将基于这些原因使用它们。 这些是图像search引擎优化的良好实践。

浏览器并不总是设置为默认打印背景图像; 如果你打算让人们打印你的页面:)

如果您将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(../resourceshttp://img.dovov.comheaderImage.png) no-repeat; }

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

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

关于sanchothefat的回答 ，但从另一个方面。 我总是问自己：如果我完全从网站上删除样式表，其余的元素是否只属于内容？ 如果是这样，我做得很好。

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

每当你想要放置图像时，都要回答这个问题：

这是内容的一部分还是devise的一部分？

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

另外，不要考虑旁边的两种技术，只是因为你希望是“打印机友好”或不。 也不要从CSS的SEOangular度隐藏内容。 如果您发现自己在CSS文件中pipe理自己的内容，那么您就会在自己身上发现自己。 这只是内容的一个微不足道的决定。 其他方面都应该被忽略。

我会再添加两个参数：

  • 如果您需要调整图像大小 ， img标签是很好的。 例如，如果原始图像为100像素×100像素，而您希望像素为80像素×80像素，则可以设置img标签的CSS宽度和高度。 我不知道有什么好的方法来使用背景图像做到这一点。 编辑：这现在也可以做一个背景图像，使用background-size CSS3属性。

  • 当你需要在精灵之间dynamic切换时，使用背景图像是很好的。 例如，如果您有一个button图像，并且当光标hover在元素上时想要显示单独的图像，则可以使用包含常规和hover精灵的背景图像，并dynamic更改背景位置。

Foreground = img。

背景= CSS背景。

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

通过使用IMAGES的主要PROS之一是它是更好的search引擎优化 。

使用背景图像，您需要绝对地指定尺寸。 如果您事先没有真正了解它们，或者无法确定它们，这可能是一个重大的问题。

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

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

在多个皮肤或devise版本的情况下使用CSS背景图像。 Javascript可以用来dynamic地改变一个元素的类，这将迫使它渲染一个不同的图像。 使用IMG标签，可能会更棘手。

其他情况下，应使用background-image ：

  • 当鼠标hover在图像上时，想要更改图像。
  • 当你想添加圆angular到图像。 如果使用img ，图像会从圆angular漏出。

这是技术上的考虑：图像是否会dynamic生成？ 在HTML中生成<img>标签比试图dynamic编辑CSS属性要容易得多。

使用<IMG>标记的另一个好处是与SEO相关 – 也就是说，您可以在图像标记的ALT属性中提供有关图像的其他信息，而通过CSS指定图像时无法提供此类信息，只有图片文件名可能被search引擎索引。 ALT属性肯定会给CSS方法带来<IMG>标记的SEO优势。 这就是为什么国际海事组织（IMO）应该使用<IMG>标签指定要在图片search结果（例如Google图片search）中排名很好的图片。

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

另外，我有一个画廊部分有不一致的图片尺寸，所以即使这些图片显然被认为是内容，我使用背景图像和集中在一个设置大小的div。 这和Facebook在他们的专辑中所做的一样。

关于使用CSS TranslateX / Yanimation图像（正确的方法来animationHTML） – 如果你做一个Chrome的时间轴logging的CSS背景图像正在animation与IMG标签正在animation，你会看到油漆时间大大缩短为CSS背景图像。

还有另一个原因！ 如果您有自适应devise，并希望通过媒体查询将设备的低，中，高分辨率图像分开使用，则还应使用背景。

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

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

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

来自法国巴黎的networking学生

一个小的input，我已经有了响应式图像的问题，减缓了iPhone上的渲染长达一分钟，即使是小图像： 

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

但是，当切换到使用背景图像的问题消失了，这是唯一可行的，如果针对新的浏览器。

如果您希望用户能够“右键单击”和“保存图像”/“保存图片”，则只需添加一个小图标即可，因此如果您打算将图像作为资源其他。

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

HTML代表内容，CSS代表devise。 图像是否必要，是否需要屏幕阅读器提取？ 如果答案是肯定的，那么把图像放在HTML中。 如果纯粹是为了造型，那么可以使用CSS中的background-image属性来注入图像。 就像很多人已经提到的那样，如果你愿意的话，你可以在图像上使用一个伪元素。

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

我使用图像，而不是背景图像，当我想让他们100％伸展，这在大多数浏览器支持。

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

还要注意的是，大多数search引擎蜘蛛没有索引CSS背景图像，因此背景图片将被忽略，你将无法从search引擎获得任何stream量（简称SEO优势）。

所有使用标签定义的图像都被编入索引（除非手动排除），并且如果标题/ alt属性和文件名被正确优化（带有关键字），就可以从search引擎中引入stream量。

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

使用背景图片，如果他们是整体devise的一部分，并在多个页面上重复。 最好在后台精灵forms进行优化。

为所有不属于整体devise的图像使用标签，而且最有可能放置一次，如文章，人物和重要图像的特定图像，这些图像应该添加到Google图像中。

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

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

Interesting Posts

在android中裁剪图像

在Android中显示巨大的图像

用PHP输出图像

如何在html电子邮件中embedded图像

图像移动hover – 铬不透明问题

检测两个图像在视觉上是否相同

如何把这些图像放在一起？

如何在毕加索中使用磁盘caching？

支持事件的图像预加载器JavaScript

如何旋转UIImage 90度？