<img/> vs性能背景图像（css）

Question

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

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

记住这个陈述（图像将被缩放）。什么应该更好，图像元素或div与那些图像作为性能的背景？

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

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

<img src="..." />

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

<div></div>

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

参考文献：

1. Difference in performance between img tag elements vs divs with background images?
2. When to use IMG vs. CSS background-image?
3. http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
4. http://updates.html5rocks.com/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode

Answer 1

就个人而言，我会忘记这个例子中的表现，并专注于图像的内容：

1）图片=内容

2）背景图片=设计

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

如果您希望以不同的屏幕尺寸显示不同的图像（或某些设备上根本没有图像），或者您对图像没有出现在打印输出中感到满意，或者您对此感到满意如果关闭CSS则不会出现图像，那么通常图像是“设计”的，你应该使用背景图像。

Answer 2

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

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

Answer 3

希望对大家有帮助！。

1. 最好为您使用标签。

我认为，对图像进行动画处理就是对浏览器DOM中的内容（图像）进行动画处理。 您应该考虑行车时间（CSS和Js文件）。

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

谢谢