CSS精靈而不是圖像？

Question

查看一些大型網站的代碼（正如我有時所做的那樣），我注意到幾個大型網站（YouTube和雅虎是我看過的兩個網站）似乎使用CSS精靈來做幾乎所有的事情，幾乎沒有任何使用標籤。

這是否被普遍認爲是良好做法？我以爲使用標籤會更好地使用歸因於alt屬性，雖然如果sprited圖像用於鏈接到某些東西，您可以使用空白圖像創建鏈接，然後給這個alt屬性（youtube標誌在左上角使用這種技術）並且具有使用精靈的速度和使用標籤的可訪問性。

雖然如何使用精靈的圖像不用於鏈接？你可以簡單地使用相同的技術，youtube使用除了沒有標籤，並獲得最好的兩個？

並沒有人在開發網站時廣泛使用精靈嗎？我知道你可以通過使用它們獲得性能獎勵（較少的HTTP請求和所有的），但是管理一個網站，很多你的圖像在一個巨大的圖像中變得可怕嗎？

Answer 1

你必須分離內容圖像和裝飾圖像。

裝飾圖像，如圖標，漸變或陰影，可以放在精靈裏面。這是性能方面的最佳實踐，因爲它可以節省瀏覽器在準備好呈現之前必須執行的HTTP請求數量。我不得不承認，這很煩人。但只要你將相似的圖像組合在一起，一個文件中的所有圖標就不會那麼糟糕。 Sprite的替代方法是使用數據uri：s，並將圖像嵌入到CSS文件中，但對於最慢的瀏覽器IE7來說效果不佳。所以我想說如果你需要IE7的支持，CSS sprites仍然是最好的選擇。

內容圖像，應該在HTML中，並設置適當的alt文本，以便輔助技術（和Google）能夠按照它應該閱讀的內容。