提问



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


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

最佳参考


正确使用IMG




  1. 如果您打算使用IMG
    人们打印您的页面,您希望默认包含图像。
    — JayTee

  2. 当图像具有重要的语义含义时,使用IMG(带alt文本),例如警告图标。这确保了图像的含义可以在所有用户代理(包括屏幕阅读器)中传达。




IMG的实用用途





  1. 如果图像使用IMG加alt属性
    是内容的一部分,如徽标或图表或人(真实的人,而不是股票照片的人)。
    &MDASH; sanchothefat <​​/li>
  2. 如果依靠浏览器缩放来渲染与文本大小成比例的图像,请使用IMG

  3. 使用IMG
    用于IE6中的多个叠加图像。

  4. 按顺序使用IMGz-index
    拉伸背景图像以填充整个窗口。

    注意,CSS3 background-size不再适用;见下面的#6。

  5. 使用img代替background-image可以显着提高背景动画的效果。



何时使用CSS background-image




  1. 如果使用CSS背景图片
    图像不是内容的一部分。
    &MDASH; sanchothefat <​​/li>
  2. 何时使用CSS背景图片
    做图像替换文本,例如。段落/头。
    &MDASH; sanchothefat <​​/li>
  3. 如果您打算使用background-image
    人们打印您的页面,您不希望默认包含图像。
    &MDASH; JayTee

  4. 如果您需要改善下载时间,请使用background-image
    用CSS sprites。

  5. 使用background-image如果只需要一部分图像可见,就像使用CSS精灵一样。

  6. background-size:cover中使用background-image以拉伸背景图像以填充整个窗口。


其它参考1


这对我来说是一个黑白决定。如果图像是内容的一部分,如徽标或图表或人(真实的人,而不是股票照片人),那么使用<img />标签加alt属性。否则就有CSS背景图片。 [49] [52] [53] [60]


另一次使用CSS背景图像是在进行文本的图像替换时。段落/头。

其它参考2


我很惊讶没有人提到这一点: 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转换的更多信息。[61]

其它参考3


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


何时使用<img />



  1. 当您的图片需要被搜索引擎
  2. 编入索引时
  3. 如果与不设计的内容有关。

  4. 如果您的图像不是太小(不是图标)。

  5. 您可以添加alttitle属性的图片。

  6. 您要使用print media css
  7. 打印的网页中的图像


何时使用CSS background-image



  1. 纯粹用于设计的图像。

  2. 与内容无关。

  3. 我们可以用CSS3播放的小图片。

  4. 重复图像(在博客作者图标中,每个文章都会重复日期图标等。)。



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

其它参考4


浏览器默认情况下不会设置为打印背景图像;如果您打算让人打印您的页面:)

其它参考5


如果您将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文件中相应<img>标记的src属性(假设您不使用服务器端脚本语言或CMS来自动执行该过程)。[[[62]


如果您不希望用户能够保存图像,背景图像也很有用(尽管我不需要这样做)。

其它参考6


与sanchothefat的答案大致相同,但是从不同的方面来看。我总是问自己:如果我要从网站上完全删除样式表,那么仅的剩余元素是否属于内容?如果是,我做得很好。

其它参考7


一些答案使这里的场景过于复杂。这是一个死的简单情况。


每次你想要放置图像时,只需回答这个问题:


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


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


另外,请不要考虑这两种技术,只是因为你希望打印机友好与否。也不要用CSS隐藏SEO的观点。如果你发现自己管理你的内容CSS文件,你自己开枪。这只是一个关于内容与否的一个微不足道的决定。其他方面都应该被忽略。

其它参考8


我会再添加两个参数:



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

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


其它参考9


前景= img。


背景= CSS背景。

其它参考10


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


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

其它参考11


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


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


总之,它非常具有情境性。

其它参考12


应该使用background-image的其他一些场景:



  • 当您希望图像在鼠标悬停在其上时发生变化。

  • 如果要为图像添加圆角。如果使用img,图像会从圆角漏出。


其它参考13


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

其它参考14


使用< IMG>的另一个好处是标签与SEO相关 - 即您可以在图像标签的ALT属性中提供有关图像的其他信息,而在通过CSS指定图像时无法提供此类信息,在这种情况下,只有图像文件名可能由搜索引擎索引.ALT属性肯定提供了< IMG>标签SEO优于CSS方法。这就是为什么我认为最好在图像搜索结果中指定你想要排名的图像(例如谷歌图片搜索)使用< IMG>标签。

其它参考15


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

其它参考16


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

其它参考17


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

其它参考18


那么图像的大小呢?如果我使用img标签,浏览器会缩放图像。如果我使用css后台,浏览器只会从较大的图像中剪切一块。

其它参考19


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

其它参考20


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


使用背景图像(据我所知,在大多数浏览器中)禁用直接保存图像的选项。

其它参考21


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


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


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


来自法国巴黎的网络学生

其它参考22


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


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


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

其它参考23


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

其它参考24


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

其它参考25


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

其它参考26


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

其它参考27


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

其它参考28


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


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

其它参考29


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


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


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


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