在 Web 应用程序中使用 CSS Sprites 有哪些优点？
我正在开发一个流量相当大的网站，并且正在考虑使用 CSS 精灵来减少其设计中的图像加载数量。
除了减少传输数据量之外，使用 CSS sprite 还有什么优点吗？ 您真正节省了多少空间？ 对于网站来说，是否存在使用精灵变得值得的门槛？
更新：感谢您的回复。 显然，它们都是经过深思熟虑的，并提供了很好的资源来验证你的观点。 我觉得现在更有能力在网站设计中使用 CSS 精灵做出明智的决定。
I'm working on a website with reasonably heavy traffic and I'm looking into using a CSS sprite to reduce the number of image loads in its design.
Are there any advantages to using a CSS sprite besides reducing the amount of transmitted data? How much space do you really save? Is there a threshold where using sprites becomes worthwhile to a website?
UPDATE: Thank you for your responses. They are obviously all very carefully thought out and present good sources to verify your points. I feel much more capable to make an informed decision about using CSS sprites in my site design now.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
问题通常不在于它可能节省多少带宽。 它更多的是关于减少呈现网页所需的 HTTP 请求数量。
考虑到：
这需要时间，当执行大量请求来获取小内容（例如图像、图标等）时，会与服务器进行多次往返：您最终会花费时间等待请求发送，并且服务器响应，而不是利用这段时间下载数据。
如果我们可以最大限度地减少请求数量，我们就可以最大限度地减少到服务器的次数，并更好地使用我们的高速连接（我们下载一个更大的文件，而不是等待许多较小的文件）。
这就是使用 CSS 精灵的原因。
更多信息，你可以看看，例如：CSS Sprites: Image Slicing's Kiss of Death
The question is generally not about the amount of bandwith it might save. It is more about lowering the number of HTTP requests needed to render a webpage.
Considering :
What takes time, when doing lots of requests to get small contents (like images, icons, and the like) is the multiple round-trips to the server : you end up spending time waiting for the request to go, and the server to respond, instead of using this time to download data.
If we can minimize the number of requests, we minimize the number of trips to the server, and use our hight-speed connection better (we download a bigger file, instead of waiting for many smaller ones).
That's why CSS sprites are used.
For more informations, you can have a look at, for instance : CSS Sprites: Image Slicing’s Kiss of Death
更少的 http 请求 = 整体加载速度更快。 雅虎公司 使用此技术，如果您可以想象他们拥有的用户数量，它可以节省大量带宽。 想象一下 50 个单独的图标图像，即 50 个单独的 http 请求，而不是只有一个 css sprite 包含所有图像，这将节省 49 个 http 请求，并为网站的所有用户节省 49 个 http 请求。
Less http requests = faster loading overall. Yahoo and co. use this technique, if you can imagine the amount of users they have it saves a lot of bandwidth. Imagine 50 seperate images for icons, that's 50 seperate http requests as opposed to having just one css sprite containing all the images, that would save 49 http requests and multiply that per all the users of the site.
实际上，精灵并不是用来减少传输的数据量（在大多数情况下它会稍微增加传输的数据量），而是用来减少在服务器上完成的请求量。
浏览器上的 HTTP 请求传统上是按顺序完成的。 这意味着在前一个请求完成之前，一个请求不会启动。 此外，打开连接来执行请求的成本也很高。 通过限制服务器上发出的请求量，您可以提高元素加载的速度。
Actually, sprites are not used to reduce the amount of transmitted data (in most cases it slightly increases the amount of data transferred), but to reduce the amount of requests done on the server.
HTTP requests on a browsers are traditionally done in sequence. Which means that one request will not start until the previous one is completed. Also, it is expensive to open a connection to do a request. By limiting the amount of requests made on the server, you are increasing the speed the elements load.
我认为雅虎对 CSS sprites 有最好的论据。 此外，整个页面值得阅读：
http://developer.yahoo.com/performance /rules.html#num_http
I think Yahoo has the best argument for CSS sprites. Besides, the whole page is worth reading:
http://developer.yahoo.com/performance/rules.html#num_http
除了通过限制请求量来增强整个页面加载的性能之外，图像精灵还可以使动态交换图像（例如更改悬停时导航项的背景图像）“执行”得更好一些，因为您所做的就是更改x,y 而不是 src。
因此，我想回答保证使用它们的门槛是什么，我会立即回答，因为每个客户端的潜在负载改进。
Besides the performance enhancement of the overall page load by limiting the amount of requests, image sprites can also make dynamically swapping images (for example changing the background image of a nav item on hover) "perform" a little better since all you do is change the x,y instead of the src.
So I guess to answer what is the threshold to warrant using them, I'd say immediately because of the potential loading improvements on each individual client.
除了减少 HTTP 请求（如前所述）之外，CSS 精灵不依赖于 JavaScript。 这还提供了一些其他优点：
style属性进行内联编码，:hover伪类的任何选择器，或者在任何可以用锚点包裹的选择器（不仅仅是imgs）如果您不反对 DOM 黑客攻击，那么您可以通过推动 X 和 Y 值来获得一些漂亮的动画效果。 这使得为许多不同的状态设置动画变得更容易（例如
keypress或onmouseclick）。还有一些有趣的图形制作副作用：
In addition to reducing HTTP requests (as already noted), CSS sprites aren't dependent on JavaScript. This gives a few other advantages:
styleattributes:hoverpseudoclass, or in any selector that can be wrapped with an anchor (not justimgs)If you're not averse to DOM hacking, though, you can get some nifty animation effects just by pushing the X and Y values around. Which makes it easier to animate lots of different states (like
keypressoronmouseclick).There are a few interesting graphic production side effects as well: