图像在HTML或CSS中加载速度更快吗？

Question

如果我在侧边栏上使用此html加载图像

<img src="http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png" height="200px" width="200px" alt="image" />

它会加载任何更快/更慢的加载比我放在侧边栏上我的style.css(在标题中调用)有

.image {
  width: 200px;
  height: 200px;
  background-image: url('http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png');
}

<div class="image"></div>

Answer 1

这可以使用Firebug(在Net下),Chrome开发者工具(在网络下),Fiddler或您喜欢的任何其他HTTP嗅探器轻松验证.

如果将图像作为背景图像放在CSS中,则只有在实际使用该类并且可见时才会下载图像.如果你把它放在一个img它将立即下载并将阻止渲染,即使它是不可见的.

最后,如果计算图像加载本身的速度,它们的速度都很快.在真正的问题是,如果认为性能是在此被下载的图像可能会因你的地方你的元素是不同的顺序更好.

我会更担心其他方面.将图像作为背景图像意味着:

• 图像不是内容
• 它不可打印
• 您可以使用精灵来减少HTTP请求的数量(从而提高性能)
• 它是较慢的动画背景图像比的img

Answer 2

如果将它们放入CSS文件中,则只有在下载CSS文件本身后才会开始下载.这可能会使CSS方法略微变慢.除此之外,它应该是相同的.