用于自动化CSS图像内联的工具

时间:2014-03-04 16:01:35

标签: html css regex inline-images

我有一个CSS文件和一个从该CSS文件引用的图标集。 500个图标总共大约为200k,因此我认为将它们内嵌到CSS文件中的任何地方都不会增加使用带宽,并且会显着减少发送到服务器的请求数量。

这里有没有人知道自动替换

的工具或脚本
url('images/....png')

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

也许已经有一种自动化的工具了?

否则我将不得不写自己的正则表达式。 bash脚本是要走的路吗?

1 个答案:

答案 0 :(得分:0)

如果你真的想减少请求数量,那么找一种方法将所有图标转换为精灵!它基本上是你的所有图像粘贴到一个单独的图像文件与css文件,其中所有图像的位置都看到了glyphicons:

http://getbootstrap.com/components/

sprite的使用不会减小大小,但肯定会减少发送到服务器的请求数量,因为客户端将下载一个单个大图像,其中包含所有图标并根据css属性将显示相关图标< / p>

用它来生成精灵

http://css.spritegen.com/

我永远不会建议使用内联样式。如果需要,应尽量少用。因为它确实减慢了渲染速度