图像在 HTML 或 CSS 中加载更快吗？答案

【问题标题】：Do Images Load Faster in HTML or CSS?图像在 HTML 或 CSS 中加载更快吗？
【发布时间】：2011-10-06 16:09:04
【问题描述】：

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

&lt;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" /&gt;

它会比我放在侧边栏上更快/更慢吗我的 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');
}

&lt;div class="image"&gt;&lt;/div&gt;

【问题讨论】：

标签： css optimization html pagespeed

【解决方案1】：

这可以使用 Firebug（在 Net 下）、Chrome 开发者工具（在 Network 下）、Fiddler 或您喜欢的任何其他 HTTP 嗅探器轻松验证。

如果您将图像作为背景图像放在 CSS 中，只有在实际使用该类~~并且可见~~时才会下载该图像。如果你把它放在img 中，它会立即被下载，即使它不可见也会阻止渲染。

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

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

图片不是内容
无法打印
您可以使用精灵来减少 HTTP 请求的数量（从而提高性能）
比img是slower to animatebackground-image

【讨论】：

“你们为什么不先验证你的答案？” - 你为什么要回答这个问题并为此获得声誉积分。在这里问的几乎所有内容都可以被谷歌知道并且“首先验证答案”
@Jawad 已编辑。我希望它现在是犹太洁食吗？ :)
不要误会我的意思。像您这样的人如何抽出时间并努力帮助像 Virendar 这样的人，这真是令人惊讶，我们真的很感激。
使用精灵总是很糟糕，尤其是对于 IE，那些 HTTP 请求让我想起在高速公路（高速公路）上开车跟在老人后面哈哈！
抱歉，在我的测试中，有些浏览器会下载背景图片（测试过 Chrome 和 Safari），即使它们是 display: none。这个答案具有误导性。

【解决方案2】：

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

30 tricks to optimize images in web pages

Yahoo Performance rules for web developers

【讨论】：

【解决方案3】：

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

没有任何 css 重置、任何 jquery/javascript 和其他东西，我得到了结果

使用我里面有这个结构

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

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

使用背景：url()

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

在这个测试中，我使用了一个 10.5 KB (200px X 200px) 的 png 图片。

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

【讨论】：