在构建网页时，我的一位同事使用 CSS 背景图像属性显示任何徽标，而不是使用 HTML 嵌入图像<img>标签。同事报告说这是为了减少 HTTP 请求的数量。他还向我展示了图像精灵 http://www.google.co.in/images/nav_logo95.png并表示谷歌用精灵图像显示其标志。
我不同意他的做法并向他表明主要Google.com 页面 http://www.google.com/将他们的徽标加载到<img> tag.
哪个是更好的做法？
EDIT:Facebook 也做了同样的事情在他们的主页上 http://www.facebook.com，将徽标加载到 img 标签中，同时在其个人资料页面上使用CSS精灵 http://static.ak.fbcdn.net/rsrc.php/v1/yD/r/-gXPV10wI-z.png.
由此我的结论是，也许您应该在 img 标签中加载主徽标，而对于页脚或子页面等其他徽标，您可能希望使用 CSS 精灵在后台加载它们。
UPDATED：我经常使用 img 标签加载徽标，并且也知道为什么我们可能使用精灵。我的主要问题是：如果页面上有三个或更多徽标，加载它们的更好方法是什么？
当图像具有语义时，所以它被认为是内容，使用 IMG 标签，没有精灵，并且正确设置了 ALT。
当图像只是装饰时，比如框的背景、按钮的背景、菜单选项的背景等，它没有语义意义，所以你可以用它作为背景CSS 中的 SPAN、DIV 等。在这种情况下您可以使用精灵。
原因图像精灵是最佳实践是因为HTTP协议 http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol有效，并且因为我们希望最大限度地减少网页加载时间（您应该让网站加载速度更快的原因有很多，其中之一是因为谷歌不久前将网站速度纳入其排名算法中 http://www.mattcutts.com/blog/site-speed/) HTTP 是一种非基于连接的协议，这意味着对于浏览器的每个请求，都必须建立一个新的连接，并且必须重新计算到服务器的路由。因此，如果每个图像都在同一个文件中，则浏览器会保存多个请求。
浏览器执行的每个请求都分为以下步骤：DNS 查找、连接、发送、等待、接收。我们可以用firebug http://getfirebug.com/network查看网页加载期间完成的所有请求。
我使用了一个 WordPress 主题，测量了每个图像资源在每个步骤所花费的时间（好吧，Firebug 做到了，而不是我），并计算出 38.8% 的时间对应于延迟（在本例中，延迟 = DNS 查找 + 连接 + 发送） ），而只有 14.4% 对应于下载数据（剩余的 46.7% 对应于等待服务器响应）。延迟时间应该最小化，因为它不是投入时间来实际下载浏览器需要显示的资源。
对于同一服务器上的每个静态图像请求，DNS 查找、连接和发送步骤都是多余的。那么，我们怎样才能切断它们呢？你猜怎么了？使用图像精灵！每个图像请求将仅分组为一个，从而导致浏览器要下载的所有图像千字节只有一组延迟时间。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
