如何減少使用css sprite技術時的精靈數量

我注意到CSS sprite（.gif）的文件大小在整個週期內都保持增長。這是因爲我們不斷添加新的圖標/精靈，並且我們永遠不會刪除現有的精靈，因爲我們害怕打破現有的設計（偏移重新計算或者精靈可能被用在我們忽略的某個地方）。如何減少使用css sprite技術時的精靈數量

我想知道我們如何減少精靈的數量？圖像文件的大小不斷增長和增長。

來源

2012-08-05 janetsmith

使用一些答案，我認爲是好的，但沒有直接回答我的疑問的格式，我將其標記爲有用的（「向上」箭頭）。有些答案似乎很有希望，但我沒有時間去驗證它（需要大量閱讀），我也會將其標記爲有用。我不會簡單地將其中一個標記爲未經驗證即被接受。 – janetsmith 2012-08-05 23:17:14

您必須先進行手動檢查（首先搜索精靈名稱，但一旦得到結果，您將不得不使用筆和紙）來實現正在使用的圖像。您可以取代那些那些爲新的不碰爲休息的位置，但這樣做之前，我會考慮：

更改您的GIF PNG-24或SVG，因爲它們重量更輕，有WAY質量更好，尤其涉及透明度。 SVG也是可擴展的，對於視網膜顯示設備來說非常好，儘管所有瀏覽器都不支持（即IE），因此需要一種替代方案。
對不同類別的圖像使用不同的精靈（例如，一個用於菜單圖標，另一個用於社交圖標等），因此管理起來更容易一些。您將有兩個或三個以上的服務器請求，而不是真正的差異。

來源

2012-08-05 23:09:16 Yisela

我們有一個巨大的電子商務網站。任何刪除精靈都可能需要QA團隊進行全面的現場檢查，這可能是不可能的。 – janetsmith 2012-08-05 23:20:54

將圖標分類的想法可能會減少添加新精靈的影響，I + 1。但是，特定的精靈圖像將繼續增加。 – janetsmith 2012-08-05 23:22:49

你最終必須這樣做。比以後更好，特別是因爲您需要不添加「系統」來添加圖標來跟蹤它們。我能想到的唯一選擇是編寫腳本自動執行檢測，但我無法想象如何。也許別人有更好的辦法。我們在談論多少圖標？當你添加一個新的代碼或在css中留下舊的類時，你是否替換了代碼？ – Yisela 2012-08-05 23:30:26

根據我的經驗，你必須做一次清理。然後做正確的事情！

做OOCSS併爲特定的精靈圖像使用口語名稱。

在此之後，主管該精靈會muuuuch容易，但正如我所說，一個時間的努力是必要。

而且，因爲GIF是不是你想要的:-)

來源

2012-08-24 21:00:32 gekkstah

如何減少使用css sprite技術時的精靈數量

回答

相關問題