用于Web开发的Sprite表

Question

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

提前致谢!

Answer 1

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

通过包含具有alt属性的普通图像标记,您可以使图像可用于谷歌图像搜索等内容.但是,这不是我非常重的因素.

重要的是,如果有人使用屏幕阅读器查看您的网站或只是查看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标签.