使用CSS精灵图替代图片？

Question

使用CSS精灵图替代图片？

4

看到一些大型网站的代码（我有时会这样做），我注意到其中一些大型网站（YouTube和Yahoo是我查看的两个）似乎几乎为所有内容都使用CSS精灵，几乎不使用任何< img >标签。

这通常被认为是一个好的实践吗？我认为使用< img >标签应该更好，因为有alt属性，虽然如果精灵图片用于链接到某些内容，您可以使用一张空白图像来创建链接，然后给它一个alt属性（左上角的YouTube标志使用此技术），既具有精灵使用速度也具有使用< img >标签的可访问性。

那么对于那些不用于链接的图像，使用精灵怎么办？您是否可以简单地使用YouTube使用的相同技术，只是没有< img >标记，并同时获得最佳效果？

还有没有人在开发网站时广泛使用精灵？我知道通过使用它们可以获得性能加成（请求更少等），但是当您的大量图像位于一个巨大的图像中时，管理网站是否变得非常糟糕？

- Sean

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Emil Stenström · Accepted Answer

你必须将内容图像和装饰图像分开。像图标、渐变或阴影这样的装饰性图像可以放在精灵图中。从性能角度来看，这是最佳实践，因为它减少了浏览器在渲染之前必须执行的HTTP请求数量。我得承认，维护很繁琐。但只要你把相似的图片分组在一起，比如所有图标放在一个文件里，情况就不会那么糟糕。精灵图的替代方法是使用数据URI，将图像嵌入CSS文件中，但这在IE7上效果不佳，而IE7是最慢的浏览器。因此，如果需要支持IE7，则仍然认为CSS精灵图是最好的选择。 内容图像应该在HTML中，并设置适当的alt文本，以便辅助技术（和Google）可以正确读取内容。