html - 在 sprite 中使用 Logo 标签是好是坏？

Question

在构建网页时，我的一位同事使用 CSS background-image 属性显示任何 Logo ，而不是使用 HTML 嵌入图像 <img>标签。同事反射(reflect)是为了减少 HTTP 请求的数量。他还给我看了an image sprite并说谷歌用 Sprite 图像显示其标志。

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

哪种做法更好？

编辑: Facebook 也做同样的事情 on their homepage ，在 img 标签中加载 Logo ，而在他们的个人资料页面上，他们使用 CSS sprite 显示他们的 Logo .

由此我得出的结论是，也许您应该在 img 标签中加载您的主 Logo ，而对于页脚或子页面中的其他 Logo ，您可能希望使用 CSS sprites 在后台加载它们。

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

Answer 1

当图像具有语义意义，因此它被认为是内容时，使用 IMG 标签，没有 Sprite ，并正确设置 ALT。

当图片只是装饰时，比如框的背景、按钮的背景、菜单选项的背景等，它没有语义意义，所以你可以>将其用作 CSS 中 SPAN、DIV 等的背景。在这种情况下，您可以使用 Sprite 。

Image Sprite 之所以成为最佳实践，是因为 HTTP protocol有效，并且因为我们希望最大限度地减少网页加载所需的时间(您应该让网站加载速度更快的原因有很多，其中之一是因为 Google incorporated a while ago site speed in it’s ranking algorithm )HTTP 是一种基于非连接的协议(protocol)，这意味着对于每个请求，浏览器都必须建立一个新的连接，并且必须重新计算到服务器的路由。因此，如果每个图像都在同一个文件中，浏览器会保存多个请求。

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

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

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