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

我不同意他的做法,并向他展示主Google.com页面在标签中加载他们的徽标.

哪个是更好的做法？

编辑: Facebook也在他们的主页上做同样的事情,在img标签中加载徽标,而在他们的个人资料页面上,他们使用CSS精灵显示他们的徽标.

由此我的结论是,也许您应该将主徽标加载到img标记中,而对于其他徽标(例如页脚或子页面),您可能希望使用CSS sprites在后台加载它们.

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

1> Rohan Patil..：

---

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

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

Image Sprite是最佳实践的原因是因为HTTP协议的工作原理,并且因为我们希望最小化网页加载所需的时间(有很多原因导致您希望加快网站加载速度,其中一个原因是因为谷歌在其排名算法中加入了不久之前的网站速度)HTTP是一种基于非连接的协议,这意味着对于每个请求,浏览器都必须完成新的连接,并且必须重新计算到服务器的路由.因此,如果每个图像都在同一个文件中,浏览器会保存多个请求.

浏览器所做的每个请求都分为以下步骤:DNS查找,连接,发送,等待,接收.我们可以使用firebug来查看加载网页期间完成的所有请求.

我采用了WordPress主题并测量了每一步中每个图像资源所用的时间(好吧,Firebug做到了,而不是我),并计算出38.8%的时间对应于延迟(在这种情况下,延迟= DNS查找+连接+发送),只有14.4%对应于下载数据(剩下的46.7%对应于等待服务器响应).延迟时间应该最小化,因为实际下载浏览器需要显示的资源并不是时间.

步骤DNS查找,连接和发送对于同一服务器上的每个静态图像请求都是冗余的.那么,我们怎样才能将它们切断呢？你猜怎么着？使用图像精灵!每个图像请求将只分组一个,导致浏览器下载的所有图像千字节只有一组延迟时间.

2> Quentin..：

---

徽标是内容,因此应该由元素表示(尽管趋势是以语义为代价优化性能).

---

我通常更喜欢在IMG标签中定义徽标.一个简单实用的优点是,如果有人打印您的页面,徽标将显示,如果徽标设置为背景精灵,则不会.我发现查看禁用CSS的网站在做出这样的决定时会有所帮助.

---

因为在语义代码中存在优化性能的趋势.StackOverflow不是**如何编写正确的HTML的一个很好的例子.

3> motoxer4533..：

---

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

贵公司是否与Google或Facebook具有相同的SE级别？不.在此之前,请将徽标放在img它所属的标签中.当您的网站一直是互联网上浏览量最高的网站时,您可以开始考虑性能而不是SEO.

另外,如果徽标曾经有过调整(大小,颜色等),则必须重新创建精灵以及CSS.如果它只是一个img标签,那就不存在这种麻烦了.

4> buschtoens..：

---

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

但有些网站喜欢:hover在他们的徽标上应用一种风格.现在,你被困了.

但是您可以执行以下操作,这在语义上是正确的.如果您想了解更多相关信息,可以阅读Harry Roberts关于此问题的精彩文章.

HTML

    

        
            
        
        
Welcome to Example Inc.
    

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;
}