<img /> 与背景图像（css）的性能对比答案

【问题标题】：<img /> vs background-image (css) in performance<img /> 与背景图像（css）的性能对比
【发布时间】：2013-06-25 03:04:49
【问题描述】：

我正在构建一个使用滚动插件的网站，该插件基本上可以为滚动设置动画。我非常关心性能，好像我在网站中插入了一些图像，滚动/动画时看起来很不稳定。

我可以检测到图像的主要问题是回流/重绘问题，当图像没有正确的尺寸并因此被缩放时（我必须处理这个问题，我知道best practice）。

记住这一点（图像将被缩放）。对于性能而言，以这些图像作为背景的图像元素或 div 应该更好吗？

我在我的 chrome 浏览器内存工具中制作了这个 jsFiddles，显示背景图像选项使用更少的内存。

<img src="..." />

<div></div>

div {
    background:url(...);
    background-size:100% 100%;
}

参考资料：

【问题讨论】：

另外，搜索引擎和社交媒体嵌入系统不喜欢 css 背景图片。
您能解释一下原因吗？
他们根本不缓存它们，或者在 facebook 嵌入的情况下，共享时它不被视为拇指图像。
Difference in performance between img tag elements vs divs with background images?的可能重复
请为改进现有问题的答案做出贡献，而不是故意发布重复问题。如果您想问一个更有针对性的问题，请使用标题和表达这一点的问题表述。

【解决方案1】：

就我个人而言，我会忘记这种情况下的性能，而是专注于图像是什么：

1) 图片=内容

2) 背景图片 = 设计

我倾向于考虑的方式是，我是否希望图像显示在所有屏幕尺寸、所有设备上，同时打开或关闭 CSS？我是否希望 Google 和 Facebook 将图像“编入索引”。如果所有或任何一个问题的答案都是肯定的，那么通常图像是“内容”，您应该使用 IMG 标记。

如果您希望以不同的屏幕尺寸显示不同的图像（或在某些设备上根本不显示图像），或者如果您很高兴该图像不会出现在打印输出上，或者您很高兴如果 CSS 关闭，图像不会出现，那么通常图像是“设计”的，您应该使用背景图像。

【讨论】：

很棒，简洁的情况总结。对于明确何时使用哪个非常有帮助。
很抱歉，但很难接受。问题集中在性能上，并且 1)2) 响应在此范围内完全不相关。第二 - css 关闭？真的吗？在 2015 年，在富 Web 应用程序中，我们真的考虑过这个选项吗？抱歉，但这似乎与问题完全无关。
同意 sergey，来这里是为了找出背景与图像之间的性能差异，如“什么会计算得更快/使用更少的资源”。什么时候使用完全不相关，并且在问题的参考文献 2 中回答得更好
我认为这是设计与内容的问题。
区分内容和设计很重要 - 不是因为 CSS 可以关闭 - 而是为了可访问性。浏览器可能会以“阅读器”方式显示页面，或者辅助功能可能需要知道屏幕上的重要内容。

【解决方案2】：

如果您使用 <img> 或 <svg> 标签，它将成为 DOM 的一部分，具有所有优点和缺点（它会花费您一些额外的内存和速度）。

我绝对建议使用 CSS 背景，尤其是当同一个元素/图片重复多次时（带有图标的表格等）。

【讨论】：

【解决方案3】：

从性能的角度来看，加载一堆大图像作为 CSS 背景会减慢整个网站的速度，因为解析 CSS 需要更长的时间。

但是，使用 HTML img 标签，可以更快地解析 CSS，并且每个单独的图像请求将在解析 HTML 时独立发出。

使用 CSS 方法，您正在等待所有包含图像请求的 CSS 完成解析。使用 HTML 方法，您将开始更快地从上到下单独查看内容，而不是等待所有内容立即准备好。

我是这样理解的。如果我错了，请在评论中纠正我。

【讨论】：

【解决方案4】：

希望对大家有所帮助！

我认为，动画图像是从浏览器 DOM 动画内容（图像）。您应该考虑道路时间（CSS 和 Js 文件）。

还有很多原因。我的意思是 alt 属性和大小，性能。

谢谢

【讨论】：