使用數據URI而不是精靈圖像有什麼缺點？

Question

考慮這個條件，我的網站：

• 我不支持IE8和下方，以便瀏覽器的支持是沒有問題的。

• 我還使用gzip來避免CSS中的數據超載，因爲我的 將數據URI映像複製並粘貼到我的CSS文件中。

• 我只有一個由LESS生成的CSS文件。

• 爲了方便起見，我對每個圖像數據URI使用LESS變量。

• 我把圖像變量分離LESS文件，以保持我的代碼庫乾淨

有了這一切，我仍然不知道，如果它是加載圖像最好的辦法。使用這種方法加載小圖片減少了HTTP請求的數量，我們也不必維護一個精靈圖片。

您可以想到這種方法有什麼缺點嗎？

Answer 1

如果任何圖像更改，整個css文件必須更改。這打破了HTTP緩存。使用精靈圖像時，css文件本身將從高速緩存中提供，只有更改後的圖像必須再次下載。

最好只爲數據：URI圖像生成一個css文件，另一個用於常規CSS的東西。這樣，常規的css更新不需要重新下載數據：uri圖像。

第二個問題是前景圖像，這些圖像是在HTML中與<img>標記一起提供的。如果它是一個經常使用的圖像，它將不必要地增加html的大小。