Sprite Sheet for Web Development

Question

我目前正在一個新網站上工作。我只有幾頁深，他們都使用<img>s。我正在考慮它，並決定研究所有的按鈕圖像使用精靈表，然後使用CSS來渲染合適的圖像。我想看看大家對此有何想法。這是值得的努力？它如何影響SEO，特別是ALT爲<img>s。還有什麼我應該知道的？

在此先感謝！

Answer 1

在我看來，作爲內容一部分的圖像應該使用圖像標籤，其他所有東西都可以使用背景圖像/ CSS精靈。

通過包含一個具有alt屬性的普通圖像標籤，您可以使圖像適用於Google圖像搜索等內容。但是，這不是我非常沉重的一個因素。

重要的部分是，如果有人用屏幕閱讀器查看您的網站或僅查看HTML，則內容將成功傳送到圖像標記和alt屬性。如果你在CSS中使用div，你將失去這種效果，有些人可能會錯過這些內容。但是，當涉及到非重複背景圖像，按鈕和其他面向風格的圖像時，我建議使用CSS Sprites來提高性能。

雖然將其他圖像放在真實圖像標籤中應該會稍微變差，但如果您在圖像上正確設置了緩存標頭，這可能會非常小。

編輯： 快速搜索發現這一點： http://www.google.com/support/forum/p/Webmasters/thread?tid=75fa18ce5e671f5b&hl=en

這似乎放置在div文本，然後使用精靈隱藏的文本，以減輕alt屬性：

的方法谷歌使用，相關文本中的鏈接，對於爬蟲可見，誰擁有圖片的人關閉，屏幕閱讀器等

<a href="..." style="position:relative; display:block; overflow:hidden; width:100px; height:100px"> 
relevant text here 
<span style="position:absolute; top:0px; left:0px; width:100px; height:100px; background-image:url('sprite.jpg'); background-position:0px; -100px;"></span> 
</a> 

如果性能可能是一個問題，那麼可能值得走這條路線，但如果它們是內容的一部分，我更喜歡更多語義img標籤。

Answer 2

精靈是絕對值得的努力。它們節省了加載時間，提高了響應速度，並且充分利用了緩存功能，這些都可以大大減少加載時間。

仍然可以照常使用。

SEO明智，不應該有負面影響。你沒有使用任何可以阻止爬蟲的奇特方法（讀取：flash），一切都保持W3標準，所以一切都應該沒問題。一定要通過W3驗證器來運行它，以確保其他一切都是潔淨的。

如果谷歌這樣做，它會很好，對吧？