如何在HTML表格中優化多個重複圖像

我正在生成一個大的HTML表格，並且我爲許多單元格使用圖像。例如，一列可能有豎起大拇指的圖像或拇指向下的圖像。如果我有300行，其中200個是豎起大拇指，他們都有如何在HTML表格中優化多個重複圖像

<a href="link"><img src="http://myserver.com/thumbsup.png"></a>

所以好像我要去服務器200倍得到相同的圖像，並且還在100倍的大拇指朝下的圖像。

有沒有什麼辦法可以提高效率？瀏覽器是否認識到這一點並獲取圖像的緩存值？

返回大量重複圖像的HTML表格時，最佳做法是什麼？

來源

2009-12-14 leora

每個瀏覽器都會緩存圖片，只下載一次。

來源

2009-12-14 03:24:21

我會創建一個具有背景屬性的CSS類。由於css被緩存且小於300 src="http://myserver.com/thumbsup.png"，因此每個頁面調用中的html會更小。

查看this thread獲取更多關於css背景圖片的信息，包括優缺點。

來源

2009-12-14 03:26:05 GmonC

正如喬丹所說，瀏覽器會在第一次下載後緩存圖片。但是如果你有很多圖片加載，那麼你應該考慮製作一個image sprite。

來源

2009-12-14 05:15:52 Mottie

我會在這種情況下使用CSS。

來源

2009-12-14 07:41:08 Davey

如上所述，使用css sprites。只記得在錨中添加一個文本，因爲禁用css的用戶（屏幕閱讀器）和搜索引擎只會看到一個空白鏈接（然後是文本縮進：-9999px;通過css這個文本，以便它不顯示在背景圖像的前面）。它也將幫助你的搜索引擎優化。

例如：

<style type="text/css"> 
a.th-up{ 
    background-image:url(http://myserver.com/sprite.png); 
    background-position:-10px -20px; /*or whatever the "thumbsup" image's coordinates are in your sprite*/ 
    text-indent:-9999px; 
} 
</style> 
<a href="link" class="th-up">Thumbs Up!</a>

來源

2009-12-14 09:52:05

如何在HTML表格中優化多個重複圖像

回答

相關問題