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请求的数量（从而提高性能）

这是slower to animate background-image而非img

Answer 2

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

Answer 3

浏览器会在读取HTML中的图片网址后立即开始下载图片将图片网址放入css文件中，当应用该类或CSS规则时，它将最终下载。我强烈建议您使用CSS sprites在您的网页中包含图像。

30 tricks to optimize images in web pages

Yahoo Performance rules for web developers

Answer 4

css图像更快的一个论点是，使用许多小图像的Web应用程序可以将它们组合成一个大的平铺图像，并使用css根据所包含的子图像的边界剪切源图像文件。减少到服务器的往返次数以获取附加图像可以大大增加这些应用程序的加载时间。事实上，谷歌在许多自己的应用程序（例如gmail）中使用了这个想法，尽管手动管理可能是一项艰巨的任务。

Answer 5

我使用mozilla的YSlow插件进行了一个小测试。

没有任何css重置，任何jquery / javascript＆amp;其他的事情，我得到了结果

使用

中有这个结构

        <div id="wrap">
        <img src="images/5.png" alt="" />
    </div><!--/wrap-->

并且YSlow告诉我页面加载时间为0.149秒

使用background：url（）

然后我将我的图像作为背景放在div上，称为“wrap”，结果有点快，加载时间的平均值约为0.125秒。

在这次测试中，我使用了一个10.5 KB（200px X 200px）的png图像。

顺便说一下，你必须考虑何时使用或何时在标签中使用（如span / div等）。要拥有专业且精美的结构，您必须仅为内容图像使用标记。简单的方法是禁用css。如果你有没有css所需的内容（如画廊，徽标，头像和等等），这意味着你使用了正确的方法。使用标签来加载像圆角的图像和其他设计内容这样的东西是没有用的，如果它会更快一点，那就更加明智。认为连接速度慢的人可能会使用无CSS版本，因此对于他来说，加载你的盒子的一个小角落是没有用的。当他的带宽缓慢且有限时，他只想看到内容，而不是愚蠢的东西。

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

5 个答案: