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（在网络下）、Chrome 开发者工具（在网络下）、Fiddler 或您喜欢的任何其他 HTTP 嗅探器轻松验证。

如果将图像作为背景图像放入 CSS 中，仅当该类实际使用且可见时才会下载图像。如果您将其放入 img 中，它将立即下载，并且即使它不可见也会阻止渲染。

最后，如果您计算图像本身加载的速度，它们都一样快。 真正的问题是感知性能是否更好，因为下载图像的顺序可能会有所不同，具体取决于您放置元素的位置。

不过，我会更担心其他方面。将图像作为背景图像意味着：

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

Answer 2

如果将它们放入 CSS 文件中，那么只有在下载 CSS 文件本身后它们才会开始下载。这可能会使 CSS 方法稍微慢一些。除此之外，应该是一样的。

Answer 3

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

优化网页图像的 30 个技巧

雅虎网页性能规则开发人员

Answer 4

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

Answer 5

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

无需任何 css 重置，任何 jquery/javascript &其他事情，我得到了结果

使用
我里面有这个结构

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

，YSlow 告诉我页面在 0.149 秒内加载

使用 background:url()

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

在此测试中，我使用了 10.5 KB (200px X 200px) 的 png 图像。

顺便说一句，您必须考虑何时使用或何时在标签中使用（例如 span/div 等）。要拥有专业且漂亮的结构，您必须仅对内容图像使用标签。最简单的查看方法是禁用 css。如果您有所需的内容（如图库、徽标、头像等），但没有 css，则意味着您使用了正确的方法。
使用标签加载一些东西（例如带有圆角的图像和其他设计内容）是没有用的，更不用说它是否会更快一点。认为连接速度较慢的人可能会使用无 CSS 版本，因此对他来说，用盒子的小角落加载你的内容是没有用的。当他的带宽缓慢且有限时，他只想看内容，而不是愚蠢的东西。