css 图标图像或图标图像？
我有一个网站，其中有许多图标，每个图标都有单独的图像，但我想将所有数千个图标添加到一张图像中并使用它来加快加载速度，但我不确定是否应该这样做。
这有什么优点/缺点。有什么建议吗？或者我应该只保留 1 个图像 1 个图标？
i have a website which has many icons and each icon has separate image, but i was thinking to add all thous icons into one image and use that for faster load, but im not sure if i should do this.
what is pros/cons for this. any suggestions? or should i just keep it 1 image for 1 icon?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
这是一种常见（而且很好）的技术，称为 CSS Sprite。这是一篇很好的文章，虽然有点过时，解释了它们： http://www.alistapart.com/articles/精灵
That's a common (and good) technique called a CSS Sprite. Here's a good, albeit a bit dated, article explaining them: http://www.alistapart.com/articles/sprites
如果您使用 CSS Sprites，那么您的图标加载速度会更快，因为它们都来自同一张图像。一旦可以显示一个图标，您就知道整个图像已加载。如果图像针对网络进行了优化，那么这将为您提供相当好的加载时间。
例如，如果您创建了一张包含 10 个图标的图像，那么您只需使用重新定位即可一次显示一个图标。
这可以在 CSS 中使用以下技术来完成：
或
希望有帮助:)
If you were to use CSS Sprites then your Icons will load up much quicker as they are all from the same image. As soon as one icon can be displayed then you know the whole image has loaded. If the image is optimized for web then this will give you pretty good load time.
For example if you had created an image with 10 icons then you can simply use a reposition to display one icon at a time.
This can be done in CSS using techniques such as:
or
Hope that helps :)
看看 CSS Sprites：
http://www.alistapart.com/articles/sprites
Have a look at CSS Sprites:
http://www.alistapart.com/articles/sprites
将它们组合成一张图像以减少服务器请求。
有关描述该过程的更现代的文章：
http:// www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
Combine them into one image to reduce server requests.
For a more modern article describing the process:
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/