img标签元素与具有背景图像的div之间的性能差异？

Question

在img标签和带图像背景的div中显示图像时，性能或加载/缓存行为是否有任何差异？

我的例子：

我有一个包含许多重叠图像的网站，其中一些我需要使用javascript动态加载。一个问题是我需要将图像锚定在元素的右侧，这样我才能做出很好的擦除效果。因此我使用了一个div，背景图像位置正确。无法弄清楚如何用img做到这一点，但由于div正在为我工​​作，我不知道这是否重要......

Answer 1

AFAIK，无论是DIV还是IMG，浏览器都会对图像进行缓存。在任何情况下，我认为这种情况之一是将特定性能定义为每个呈现引擎内部的实现细节（可能还有围绕它们构建的浏览器）。因此，它不受我们作为设计人员/开发人员的控制，并且可能会从浏览器更改为浏览器，从版本更改为版本。换句话说，我不会花太多时间担心它。

Answer 2

主要的性能差异是使用背景图像可以让你使用CSS精灵。让一个图像包含来自页面的大量图像意味着用户只需要为每个图像发出一个请求而不是一个请求。

Answer 3

另一个区别在于响应式布局。如果你的元素只显示在特定的屏幕宽度上（例如，不在手机上），如果在html中指定了它（例如使用display：none），它仍会加载图像，但现在大多数浏览器都会显示如果是未使用的媒体查询-CSS规则中指定的背景图像，则不加载图像。很多早期的响应式布局受到了批评，因为它们仍然使用与全尺寸网站相同的带宽。

这种设计也很有用，因为您可以轻松地为不同的屏幕尺寸指定不同的图像。平板电脑上显示“Retina”，如果没有2x res图形，笔记本电脑现在看起来并不是最好的。所以......即使你现在不做这些事情，也许这是一个很好的做法，因为你可能很快就会发现它需要它！

Answer 4

我认为通过在div中使用background-image属性，首先加载页面布局，然后在加载dom之后加载的div中加载图像。因此，通过使用background-image，可以在Web浏览器上更快地加载html布局。

Answer 5

我能想到的唯一区别是：

虽然可以使用img标签，但您无法将图像缩放为背景。这将打开背景图像加载速度更快的场景，因为它会强制您拥有正确的原生大小，而不是下载整个图像并进行缩放。然而，反过来可能是正确的：鉴于您不太关心图像质量，您可以向页面提供较小的图像并进行扩展。

我会坚持使用更清洁的东西（并且更加一致 - IE / FF / Chrome / Safari /等）。

Answer 6

技术差异是的，最值得注意的是，您可以设置IMG标签的宽度/高度，它会拉伸图像，这在某些情况下很有用。

您必须记住的主要事情是HTML文档中图像的上下文。如果图像是内容，比如图库中的图像，我会使用IMG标记。如果它只是界面的一部分，我可能会使用div。

Answer 7

实际上存在巨大差异。 div bg表现更好。 但你可以设置img标签宽度，高度。

你应该使用哪一种取决于你所处的情况。