有没有好的替代CSS精灵技术的方法？

Question

我正在开发一个需要加载大量图标的应用程序。目前我使用的是<img>标记，并将src设置为正确的URL。这会触发很多请求。即使缓存已经被正确设置，仍然会有很多HEAD请求。

我正在寻找一种解决方案，只触发最少量（最好是1个）的请求来接收所有所需的图标。但我不喜欢雪碧图的概念，因为在这个概念中更改/替换/添加图标更加困难。

还有其他解决方案吗？

例如，是否可以将所有图像的Base64编码到服务器上的一个文件中，将它们发送到浏览器，再用JavaScript拆分它们并将Base64 src设置到img标记中？

是否有人测试过这种方法或不同的方法？

- lrsjng

---

但是CSS Sprites的制作正是为了“仅需最少的请求（最好只有1个）”-http://demosthenes.info/blog/391/CSS-Sprites-for-the-Modern-Era-Refined-Animated-and-Semantic - Jawad

它肯定比使用预渲染的精灵表慢。 - BoltClock

如果您在谷歌上搜索此内容，会看到一些文章，其中一篇应该出自 Paul Irish。这里有另一篇不错的文章：http://tjrus.com/blog/base64-vs-css-sprites-battle-for-performance。 - j08691

那么你的意思是将所有图像进行base64编码，发送到浏览器，使用JavaScript进行分割（如果JS被禁用怎么办），比创建一个sprite更容易？ - Alexander Larikov

https://dev59.com/rWjWa4cB1Zd3GeqPt8VH - Jawad

Answer 1

使用Base64数据URI在CSS中将图片内联。

background-image: url('data:image/png;base64,.......');

您可以使用自定义的PHP/node.js/…脚本或在线转换器（如http://www.greywyvern.com/code/php/binary2base64或https://www.useotools.com/image-to-base64）来转换您的图像。这样只会产生一个HTTP请求（仅为CSS文件），但您无法单独控制每个内联资源的缓存，需要为CSS文件设置缓存HTTP标头。您可以让服务器在每个CSS文件请求时编码图标，这样每次更改图标时都不需要手动重新转换。服务器端应包括一些简单的缓存转换。

- J. K.

Answer 2

作为一种替代方案，为什么不尝试使用图标字体呢？这里有一些不错的免费字体可以选择：https://pictonic.co/free。

- AlecRust

---

谢谢你的回答。问题是我已经有一组完美适合的图标了，所以在这种情况下这不是一个选项。尽管如此，还是+1。 - lrsjng

你的意思是因为你不想把当前的图标转换成图标字体（信息），所以这不是一个选项吗？ :) - AlecRust

实际上是的 :) 我想让用户能够简单地添加自己的图标.. 如果您感兴趣，这是一个用于Web服务器索引的链接：http://larsjung.de/h5ai/ - lrsjng

Answer 3

您可以使用CSS sprite动态自动创建CSS精灵。

请确保在客户端请求之前或在第一次客户端请求时构建精灵并将其保存在服务器上，否则如果您在每个请求上生成精灵表，则会增加很多不必要的开销。

这使您可以将图像作为单独的文件，并在服务器上执行脚本来创建那些麻烦的精灵表，使原始文件保持完好，并使更新变得轻松。（需要使用带有imagemagick库的PHP）

注意：我不确定CSS精灵在分发图像方面的效率如何。

- George Reith