用于 Web 开发的 Sprite 表

Question

我目前正在开发一个新网站。我只有几页深，他们都使用<img>s。我正在考虑它并决定考虑为所有按钮图像等使用精灵表，然后仅使用 CSS 来呈现适当的图像。我想看看大家对此有何看法。值得付出努力吗？它如何影响 SEO，特别是 <img>s 的 ALT。还有什么我应该注意的吗？

提前致谢！

Answer 1

精灵绝对值得努力。它们可以节省加载时间、提高响应速度，还可以利用缓存，所有这些都可以显着减少加载时间。

仍然可以照常应用 Alt。

在搜索引擎优化方面，应该没有负面影响。您没有应用任何会阻止爬虫的奇异方法（阅读：flash），一切都保持 W3 标准，所以一切都应该没问题。请务必通过 W3 验证器运行它，以确保其他所有内容都是 kosher。

如果 Google 这样做了，那一定很好，对吧？

Answer 2

在我看来，作为内容一部分的图像应该使用图像标签，而其他一切都可以使用背景图像/CSS sprites。

通过包含一个带有 alt 属性的普通图片标签，您可以使图片可用于 google 图片搜索。但是，这不是我非常重视的一个因素。

重要的是，如果有人使用屏幕阅读器查看您的网站或只是查看 HTML，则内容将通过图像标签和 alt 属性成功传达。如果你使用带有 CSS 的 div，你会失去这种效果，并且有些人可能会错过内容。

但是，当涉及到不重复的背景图片、按钮和其他风格导向的图片时，我建议使用 CSS Sprites 来提高性能。

虽然将其他图像放入真实图像标签中的效果会稍差一些，但如果您在图像上正确设置缓存标头，这可能会非常小。

编辑： 快速搜索发现： http://www.google.com/support/forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en

这似乎通过在 div 中放置文本然后使用精灵隐藏文本来减轻 Alt 属性：

Google 使用的方法、链接内的相关文本、对爬虫可见、已关闭图像的人、屏幕阅读器等。

<a href="..." style="position:relative; display:block; overflow:hidden; width:100px; height:100px">
relevant text here
<span style="position:absolute; top:0px; left:0px; width:100px; height:100px; background-image:url('sprite.jpg'); background-position:0px; -100px;"></span>
</a>

如果性能可能是一个问题，那么可能值得走这条路，但如果它们是内容的一部分，我确实更喜欢语义更强的 img 标签。