Css背景图片黑客与更大的图像（CSS Sprites）

Question

智能浏览器如何智能地实现“css背景图像黑客”并且这种技术在记忆中是用于更大的图像吗？

示例可以是此页面（例如，加号图标）：
http://blueimp.github.com/jQuery-File-Upload/

加号图标实际上不是16x16px图像，它更大（469像素x 159像素），实际上是这样的： http://blueimp.github.com/cdn/img/glyphicons-halflings.png
（或者：http://blueimp.github.com/cdn/img/glyphicons-halflings-white.png）

此图像用作图标模板，其中包含所有图标，在css（http://blueimp.github.com/cdn/css/bootstrap.min.css）中，背景图像位置被调整为仅以这种方式显示图标模板的特定区域：
.icon-plus{background-position:-408px -96px;}

如果图标较大，例如，该怎么办？大小为150px x 150px的缩略图和图标模板由500张图片组成？然后图标模板是37500px x 37500px。浏览器能否以合理的方式处理这个问题，还是最好一次加载一个缩略图，每个缩略图都在自己的http进程中？

Answer 1

此技术称为 CSS Sprites ，用于减少您的http请求，从而加快页面加载速度。

说明：

网站中使用的所有图像都放在一个画布上，并且每个图像都使用background-position属性进行映射，这样，http请求就会减少，从而使您的网页加载速度更快。

  

比如说你有10个<img>个标签，可以调用10个不同的图片，   因此，浏览器需要10次请求10个不同的图像   增加http请求，如果所有这些图像都放在一个单独的   画布/图像（大多数是透明的png），只需加载一次   CSS处理剩下的..

当您在悬停按钮或其他内容时使用图片时，这非常有用，因为它已经加载，您在悬停时不会看到轻弹...

For More Reference

Answer 2

我进一步检查了这一点，并且需要这种名为CSS sprites的黑客（以及其他hacky优化：data-urls中的base64图像，CSS / Javascript连接），因为HTTP 1.1使所有调用同步（source ）。

此时（2012年10月）这些类似黑客可能适用于每页有数百个HTTP调用的大型站点，但是HTTP 2.0 is coming在几年内（我假设）支持更好的技术（例如，异步调用）并希望这些黑客不必要。

黑客的问题是可维护性降低，当HTTP 2.0终于出现时，可能需要删除所有黑客以恢复正确的可维护性和/或完全受益于HTTP 2.0的优势if there are such） 。在等待HTTP 2.0时，请考虑例如。 SPDY（根据recent news可能是HTTP 2.0的基础，但请仔细检查其他服务器模块是否不会干扰SPDY并遵循浏览器对spdy的支持增加（如果它增加的话）。或者如果您的网站只有几个或几十个http电话，请仔细考虑这些黑客是否有足够的好处来弥补降低的可维护性。