我正在开发一款需要加载大量图标的应用。目前，我正在使用<img>标记，并将src设置为正确的网址。这引发了很多请求。即使正确设置了缓存，仍然会有很多HEAD请求。
我正在寻找一种解决方案，它只会触发最少的请求（最好是1）来接收所有需要的图标。但是我不喜欢spriting的概念，因为在这个概念中更改/替换/添加图标更加困难。
还有其他解决方案吗？
例如，是否要将所有图像base64编码到服务器上的一个文件，将它们发送到浏览器，用JavaScript拆分并将base64 src设置为img标签？
有人测试这种或不同的方法吗？
答案 0 :(得分：4)
使用Base64数据URI在CSS中内嵌图像。
background-image: url('data:image/png;base64,.......');
您可以使用自定义PHP / node.js / ...脚本转换图像，或使用在线转换器，例如http://www.greywyvern.com/code/php/binary2base64
这导致只发出一个HTTP请求（只有CSS文件的一个）但您无法单独控制每个内联资源的缓存。您需要为CSS文件设置缓存HTTP标头。
您可以让服务器对每个CSS文件请求编码图标，这样您每次更改图标时都无需手动重新转换图标。一些简单的转换缓存应该包含在服务器端。
答案 1 :(得分：3)
就替代方案而言，为什么不尝试图标字体？这里有一些好的免费的：
答案 2 :(得分：1)
您可以使用CSS sprite
动态创建CSS精灵确保在客户端请求它们或第一个客户端请求之前构建精灵并将它们保存在服务器上，因为如果在每个请求上生成一个精灵表，就会增加很多不必要的开销。
这允许您将图像作为单独的文件，只需在服务器上执行脚本即可创建那些讨厌的精灵表，保留原件并使其更新变得轻而易举。 （需要使用imagemagick库构建的PHP）
注意：我不确定分发图片CSS精灵的效率如何。