Sprite Sheet for Web Development

Question

我目前正在一个新网站上工作。我只有几页深，他们都使用<img>s。我正在考虑它，并决定研究所有的按钮图像使用精灵表，然后使用CSS来渲染合适的图像。我想看看大家对此有何想法。这是值得的努力？它如何影响SEO，特别是ALT为<img>s。还有什么我应该知道的？

在此先感谢！

Answer 1

在我看来，作为内容一部分的图像应该使用图像标签，其他所有东西都可以使用背景图像/ CSS精灵。

通过包含一个具有alt属性的普通图像标签，您可以使图像适用于Google图像搜索等内容。但是，这不是我非常沉重的一个因素。

重要的部分是，如果有人用屏幕阅读器查看您的网站或仅查看HTML，则内容将成功传送到图像标记和alt属性。如果你在CSS中使用div，你将失去这种效果，有些人可能会错过这些内容。但是，当涉及到非重复背景图像，按钮和其他面向风格的图像时，我建议使用CSS Sprites来提高性能。

虽然将其他图像放在真实图像标签中应该会稍微变差，但如果您在图像上正确设置了缓存标头，这可能会非常小。

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

这似乎放置在div文本，然后使用精灵隐藏的文本，以减轻alt属性：

的方法谷歌使用，相关文本中的链接，对于爬虫可见，谁拥有图片的人关闭，屏幕阅读器等

<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标签。

Answer 2

精灵是绝对值得的努力。它们节省了加载时间，提高了响应速度，并且充分利用了缓存功能，这些都可以大大减少加载时间。

仍然可以照常使用。

SEO明智，不应该有负面影响。你没有使用任何可以阻止爬虫的奇特方法（读取：flash），一切都保持W3标准，所以一切都应该没问题。一定要通过W3验证器来运行它，以确保其他一切都是洁净的。

如果谷歌这样做，它会很好，对吧？