CSS图标图像或图标图像？答案

【问题标题】：css icon images or icon image?CSS图标图像或图标图像？
【发布时间】：2011-02-02 02:45:41
【问题描述】：

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

这有什么优点/缺点。有什么建议么？还是我应该只为 1 个图标保留 1 个图像？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案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;

}

希望有帮助:)

【讨论】：

【解决方案3】：

看看 CSS Sprites：

【讨论】：

【解决方案4】：

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

【讨论】：