Question

我有一个网站，有很多图标，每个图标都有单独的图像，但我想将所有图标添加到一个图像中并使用它来加快速度，但我不确定我是否应该这样做。

这是什么利弊。有什么建议？或者我应该为1个图标保留1个图像？

Answer 1

这是一种称为CSS Sprite的常见（和良好）技术。这是一篇很好的，尽管有点过时的文章，解释了它们：http://www.alistapart.com/articles/sprites

Answer 2

如果您使用CSS Sprites，那么您的图标将加载得更快，因为它们都来自同一图像。只要显示一个图标，您就会知道整个图像已加载。如果图像针对网络进行了优化，那么这将为您提供相当好的加载时间。

例如，如果你创建了一个包含10个图标的图像，那么你可以简单地使用重新定位来一次显示一个图标。

这可以使用以下技术在CSS中完成：

.teststyle {

background-image: url(icons.png);

background-position: top; left;

}

或

.teststyle {

background-image: url(icons.png);

background-position: 10px; 50px;

}

希望有所帮助：）

Answer 3

看看CSS Sprites：

Answer 4

将它们合并为一个图像以减少服务器请求。