Question

在构建网页时，我的一位同事使用 CSS background-image 属性显示任何徽标，而不是使用 HTML<img>标记嵌入图像。同事报告说这是为了减少 HTTP 请求的数量。他还向我展示了an image sprite，并说 Google 会在其子画面上显示其徽标。

我不同意他的方法，并向他展示了主Google.com page将其徽标加载到<img>标签中。

哪个是更好的做法？

编辑：Facebook 也做同样的事情on their homepage，将徽标加载到 img 标签中，同时在其个人资料页面上使用CSS sprite显示其徽标。

从这个我的结论是，也许你应该加载你的主标志在一个 img 标签，而其他标志，如在页脚或子页面，你可能想使用 CSS 精灵加载它们在后台。

UPDATED：我经常用 img 标签加载徽标，也知道为什么我们可能会使用 sprites，我的主要问题是：如果您在一个页面上有三个或更多徽标，那么加载它们的更好方法是什么？

28

14

11

5

Answer 1

当图像具有语义含义，因此将其视为内容时，使用 IMG 标签，不带精灵，并正确设置了 ALT。

当图像只是装饰时，例如框的背景，按钮的背景，菜单选项的背景等，它没有语义，因此您可以将其用作背景来自 CSS 的 SPAN，DIV 等。在这种情况下，您可以使用 sprites。

Image Sprite的原因是最佳实践，因为HTTP protocol是如何工作的，并且因为我们希望最大程度地减少加载网页所需的时间（有很多原因可以使您的网站加载更快，其中一个原因是因为Google incorporated a while ago site speed in it’s ranking algorithm）HTTP 是基于非连接的协议，这意味着如果每个请求中的浏览器都重新计算连接到必须完成的服务器

浏览器执行的每个请求都分为几个步骤：DNS 查找，连接，发送，等待，接收。我们可以使用firebug查看在加载网页期间完成的所有请求。

enter image description here

我采取了一个 WordPress 主题，并测量了每个步骤中每个图像资源所花费的时间（好吧，Firebug 这样做，而不是我），并计算出 38.8 ％的时间对应于延迟（在这种情况下延迟 = DNS 查找 + 连接 + 发送），而只有 14.4 ％对应于下载数据（剩余的 46.7 ％对应于等待服务器响应）。

对于同一服务器上的每个静态图像请求，DNS 查找，连接和发送步骤都是冗余的。那么，我们如何切断它们？猜猜是什么？使用图像精灵！每个图像请求将只分组一个，导致浏览器要下载的所有图像 KB 只有一组延迟时间。

Answer 2

徽标是内容，因此应该由<img>元素表示（尽管趋势是以语义为代价优化性能）。

Answer 3

徽标是您网站内容的一部分，因此它应该位于img标签中，而不是作为背景图像。这将有助于提高 SEO（添加标题和 alt 属性也将如此），而像 Google，Facebook 等公司将其图像放入精灵中的原因是为了加载时间-而不是 SEO 增强。

您的公司是否与 Google 或 Facebook 具有相同的 SE 排名？否。在那之前，请将徽标放在其所属的img标签中。当您的网站始终是互联网上查看次数最多的网站时，您可以开始考虑性能而不是 SEO。

此外，顺便说一句，如果徽标有一个调整（大小，颜色等），则必须重新创建 sprite 以及 CSS。如果它只是一个img标签，这个麻烦是不存在的。

Answer 4

徽标是内容-这是正确的。当搜索机器人抓住它时，您可能会很高兴。

但是有些网站喜欢在其徽标上应用:hover样式。现在，您被困住了。

如果你想了解更多，你可以阅读 Harry Roberts 关于这个问题的great article。

HTML

<body>
    <div id="head">
        <a id="header-logo" href="http://www.example.com/" title="Example Inc. - Your slogan">
            <img src="/img/assets/header-logo.png" alt="Example Inc. - Your slogan"/>
        </a>
        <h1>Welcome to Example Inc.</h1>
    </div>
</body>

CSS

body > #head a#header-logo {
    background-image: url(/img/assets/logo-header-sprite.png);
    background-position: left top;
}
body > #head a#header-logo:hover {
    background-position: left -50%;
}
body > #head a#header-logo img {
    visibility: hidden;
}