<img />与background-image（CSS）在性能方面的区别

Question

我正在构建一个网站，使用一个滚动插件来实现滚动动画。由于如果在网站中插入一些图片时，捕捉滚动/动画时看起来相当卡顿，我非常担心性能问题。

我发现图片存在的主要问题是reflow/repaint问题，当图片尺寸不正确而需要进行缩放时会发生这种问题（我知道相关最佳实践）。

在考虑到这个问题的情况下（图片将被缩放），为了提高性能，哪种更好，使用img元素还是div并将图片作为背景？

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

<img />: http://jsfiddle.net/ek6Xn/

<img src="..." />

background-image: http://jsfiddle.net/ek6Xn/1/

<div></div>

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

参考文献：

1. img标签和带背景图片的div之间的性能差异？
2. 何时使用IMG和CSS的背景图片？
3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
4. http://updates.html5rocks.com/2013/02/用DevTools连续绘制模式对长时间绘制进行分析

- Alvaro

---

此外，搜索引擎和社交媒体嵌入系统不喜欢CSS背景图片。 - leonard vertighel

请问你能解释一下为什么吗？ - Alvaro

他们只是不缓存它们，或者在Facebook嵌入的情况下，在分享时它不被视为缩略图。 - leonard vertighel

可能是重复的问题：img标签元素与带有背景图像的div之间的性能差异？ - Jukka K. Korpela

请贡献力量改进现有问题的答案，而不是故意发布重复的内容。如果您想提出更加专注的问题，请使用一个能够表达这一点的标题和问题陈述。 - Jukka K. Korpela

Answer 1

个人认为在这种情况下应该忘记性能，而是专注于图片的用途：

1）图片=内容

2）背景图片=设计

我倾向于这样思考：我是否希望图片出现在所有屏幕尺寸、所有设备上，并且无论CSS打开还是关闭都可以看到？我是否希望谷歌和Facebook“索引”这张图片？如果对所有或任何一个问题的回答都是肯定的，那么通常这张图片就是“内容”，你应该使用IMG标签。

如果你希望在不同的屏幕尺寸上显示不同的图片（或在某些设备上根本不显示图片），或者如果你愿意在打印时不显示图片，或者如果你愿意在CSS关闭时不显示图片，那么通常这张图片就是“设计”，你应该使用背景图片。

- MrCarrot

---

情况的精彩简洁总结，非常有帮助，清楚了什么时候使用哪一个。 - CodeFinity

抱歉，但很难同意。问题侧重于性能，1）2）的回答在这个范围内完全不相关。第二 - 关闭CSS？真的吗？在2015年，在富Web应用程序中我们真的会考虑这个选项吗？抱歉，但这似乎与问题完全无关。 - Sergey Sob

同意Sergey的观点，来这里是为了了解背景和图像之间的性能差异，即“哪个会计算得更快/使用更少的资源”。什么情况下使用什么完全不相关，并且在问题的参考文献2中得到了更好的回答。 - Douwe

我认为这是设计与内容的问题。 - basickarl

重要的是要区分内容和设计 - 不是因为CSS可以切换关闭 - 而是为了可访问性。浏览器可能会以“阅读器”模式显示页面，或者辅助功能可能需要知道屏幕上什么是重要的。 - Simon Backx

Answer 2

从性能角度来看，将大量的图片作为CSS背景加载会减慢整个网站的速度，因为CSS解析需要更长的时间。然而，使用HTML img标签，CSS可以更快地解析，每个单独的图像请求都将在HTML解析时独立进行。使用CSS方法，您需要等待包含图像请求的所有CSS完成解析。使用HTML方法，您将从上到下分别看到内容，而不必等待所有内容一次性准备好。这就是我的理解，请在评论中纠正我。

- Toma Nistor

Answer 3

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

我强烈建议使用CSS背景，特别是当相同的元素/图片被重复多次使用时（例如带有图标的表格等）。

- xpuu

Answer 4

希望这对大家有所帮助！

1. 最好使用标签。

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

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

谢谢

- Josef Anderson