自動執行CSS圖像內嵌的工具

我有一個CSS文件和一個從該CSS文件引用的圖標集。 500個圖標總共大約20萬個，所以我認爲將它們內聯到CSS文件中的位置並不會增加已用帶寬，並且會顯着減少發送到服務器的請求數量。自動執行CSS圖像內嵌的工具

有誰知道這裏的工具或腳本，以更換

url('images/....png')

與

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

自動化也許已經有能夠自動此工具？我不得不寫我自己的正則表達式。是一個bash腳本的路要走嗎？

2014-03-04 Alexander

指南針可以這樣做：http://compass-style.org/reference/compass/helpers/inline-data/ –

https://www.npmjs.org/package/grunt-圖像嵌入順便說一句，你也可以看看CSS的精靈（將這些圖標組合成一個圖像，並使用這個圖像作爲背景與背景位置來顯示相關部分） – pawel

如果你真的想減少請求的數量，然後尋找一種方法將所有的圖標轉換成精靈！它基本上是粘貼到一個單獨的圖像文件，其中包含所有圖像的位置的css文件所有圖像都看看glyphicons：

精靈的使用不會減少大小，但必將降低請求數量發送到服務器的客戶端將下載一個單一的大圖像，這將對所有的圖標，並根據CSS屬性會顯示相關的圖標

使用這種生成精靈

我絕不會推薦使用內聯樣式。如果需要應該使用最低限度。因爲它確實降低了渲染速度

2014-03-04 16:28:09

回答