php - 用于 Web 开发的 Sprite 表

Question

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

提前致谢!

Answer 1

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

通过包含带有 alt 属性的普通图像标签，您可以使图像可用于诸如谷歌图像搜索之类的东西。但是，这不是我非常看重的因素。

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

但是，当涉及到非重复背景图像、按钮和其他面向样式的图像时，我建议使用 CSS Sprites 来提高性能。

虽然将其他图像放在真实图像标签中的性能会稍微差一些，但如果您在图像上正确设置缓存 header ，这种情况会非常小。

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

这似乎通过在 div 中放置文本然后使用 Sprite 隐藏文本来减轻 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 标签。