Question

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

我不同意他的做法，并向他显示主Google.com page在<img>标记中加载了他们的徽标。

哪种更好的做法？

修改 Facebook也做同样的事情on their homepage，在img标签中加载徽标，而在他们的个人资料页面上，他们使用CSS sprite显示他们的徽标。

由此我的结论是，您可能应该将主徽标加载到img标记中，而对于其他徽标（例如页脚或子页面），您可能希望使用CSS精灵在后台加载它们。

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

Answer 1

当图片具有语义含义时，它被认为是内容，使用IMG标记，没有精灵，并且正确设置了ALT。

当图片只是装饰时，如框背景，按钮背景，菜单选项背景等，它没有语义含义，所以你可以使用CSS作为SPAN，DIV等的背景。在这种情况下你可以使用精灵。

图片精灵的原因是最佳做法，因为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查找，连接和发送对于同一服务器上的每个静态图像请求都是多余的。那么，我们怎样才能将它们切断呢？你猜怎么着？使用图像精灵！每个图像请求将只分组一个，导致浏览器下载的所有图像千字节只有一组延迟时间。

Answer 2

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

Answer 3

徽标是您网站内容的一部分，因此它应位于img标记中，而不是背景图片。它将有助于增加搜索引擎优化（添加标题和alt属性）以及谷歌，Facebook等公司将其图像放入精灵的原因是加载时间 - 而不是SEO增强。

贵公司的SE等级是否与Google或Facebook相同？在此之前，请将徽标放在img标签中。如果您的网站一直是互联网上浏览量最高的网站，那么您可以开始考虑性能而不是SEO。

另外，如果徽标曾经有过调整（大小，颜色等），那么必须重新创建精灵以及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;
}

Answer 5

我猜错了，虽然只是猜测，如果您网站的徽标图片包含在标题元素中，例如{{1}然后，似乎可能会在该图像与网站的身份之间建立语义关系。此外，通常，徽标将被视为品牌目的的有意义内容，即公司或品牌的视觉识别。

为此目的使用精灵似乎会削弱该品牌的重要性，因为它实际上不会比该网站中包含的任何其他图像重要或更少（因为，实际上所有图像都是同一图片）。

如果带宽如此重要，那么我建议将所有其他图像放在一起，但要保持徽标的独立性/身份。

Answer 6

即使图像徽标是语义信息，也没有理由不使用精灵进行优化。如果精确地使用精灵，即通过在正确识别的容器内使用图像，页面的整体含义（sēmantikós）不会丢失。 没有普遍认同的语义网 - 语义是一种哲学艺术，并且可以进行大量的解释。

也许可以说，比徽标图像更合适的是标题（h1，根据其定义）设置为隐藏可见性的块元素。文本变得可搜索，对页面具有语义含义（允许在基于文本的浏览器和屏幕阅读器中正确替换内容），以及h1的背景设置为必要时精灵的定位。

双方都有争论，至少从SEO的角度来看 - 每个图像都是可搜索的对象，并且是入站流量的机会;但每个http请求占用带宽并减慢页面的加载时间，使其不太优化，从而降低排名。

修改的

当您有3个或更多徽标时，http请求点就没有意义;即使调整大小，后续徽标也可能是相同的图像。如果没有，请重新考虑您为何如此使用徽标。

如果它们是同一公司的3个不同徽标，则它们不再是语义，不再影响页面的含义。这类似于说 ABC Company 的页面也是关于他们的DBA（注册商业名称，“做生意”） XYZ公司，这是不好的做法。在这种情况下，为公司设置页面，然后为DBA设置另一个页面。该页面适用于主要公司或其子公司LLC。即使您说“ ABC公司是：”然后列出每个DBA及其各自的徽标，该页面的含义是 ABC Company 的描述，其中应该有{ {1}}或h1带有 ABC公司徽标，其中较低级别的标题带有其他徽标;在这一点上，减少加载时间是优先事项，而不是给其他徽标赋予意义。为DBA创建可搜索的内容应该降级为h2和更低的标题。

Answer 7

我希望人们能够下载/链接我的徽标。因此我不会将它包含在精灵图中。

Answer 8

我通常更喜欢在IMG标签中定义徽标。一个简单实用的优点是，如果有人打印您的页面，徽标将显示，如果徽标设置为背景精灵，则不会。

在做出这样的决定时，查看禁用CSS的网站会很有帮助。它让您对网站的最低标准观看体验有所了解。如果你的网站在这种情况下有意义，就像把你的房子建在岩石上一样。

Answer 9

我认为你应该坚持使用<img>标签，直到Google发明了“背景图片搜索” - 一种搜索背景图片，将精灵分解为单个图像并智能区分装饰的服务和分析CSS的有意义的图像。

编辑：问自己这个问题：您想要强调的是您的徽标;或者它只是另一种装饰。相应地回答并实施。

Answer 10

情况：贵公司决定更新/更改徽标，但请在精灵中等待您的徽标。所以你再次重新创建了精灵。我的建议是，在img标签中保留徽标。

Answer 11

在罗马时，做罗马人所做的事。

关于IMG标签中的徽标，来自Google的官方字词.. http://www.youtube.com/watch?v=fBLvn_WkDJ4

保留标记的原因： 为了获得良好的搜索引擎可见性，当有人谷歌公司的名称时，徽标应该出现在图像结果中。

保留css-sprites的原因[背景图片]： 加载时间更快

大品牌： 所有大品牌在其网站上都有媒体部分，也是一个新闻部分，他们将所有徽标保存为可下载格式。

Answer 12

Sprites允许您减少请求数量。只有在一个样式表中才能使用它。

Ex：需要精灵的第一个标签被称为背景图像，然后在同一样式表中的另一个标签中再次调用。如果它们位于不同的样式表中，则会多次请求它们。

小文章：http://webmasterformat.com/blog/css-sprites

Answer 13

你可以通过css clip：property在img元素中使用sprite。正确使用精灵总是优化的好事。有时它不实用。这是你必须为你遇到的每个不同情况（网站）做出的判断。

Answer 14

我建议使用带有替代文字的徽标的IMG标记，并将所有其他图像合并为精灵图片。我相信使用spritesheets只有当你有超过3张图像时才真正有用。请阅读上面的Rohan Patil's answer了解原因。

我的主要问题是，如果您在页脚，子页面等中有3个或更多徽标，例如LOGO，那么，有什么更好的方式？

在这种情况下，是的，添加带有IMG标签的主徽标，然后使用精灵。

在精灵中使用徽标标签是好还是坏？

14 个答案: