Question

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

提前致谢！

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属性：

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

Answer 2

Sprites绝对值得付出努力。它们可以节省加载时间，增加响应，还可以利用缓存，这些都可以大大减少加载时间。

Alts仍可照常使用。

明智的SEO，应该没有负面影响。你没有应用任何可以阻挡爬虫的奇特方法（读取：flash），一切都保持W3标准，所以一切都应该没问题。务必通过W3验证器运行它以确保其他所有内容都是犹太洁食。

如果谷歌这样做，它必须是好的，对吗？

用于Web开发的Sprite表

2 个答案: